Question

您好我有以下代码（我删除了一些膨胀，但所需的一切都在这里。

<div class="item">
<div class="img_url"><input type="text" value="/siteimg/Designs/special-request.jpg" id="DT_Image_1" name="DT_Image_1" /></div>
<div id="copy_to_all_1"><a href="#">Copy to all</a></div>
</div>

<div class="item">
<div class="img_url"><input type="text" value="" id="DT_Image_2" name="DT_Image_2" /></div>
<div id="copy_to_all_2"><a href="#">Copy to all</a></div>
</div>

<div class="item">
<div class="img_url"><input type="text" value="" id="DT_Image_3" name="DT_Image_3" /></div>
<div id="copy_to_all_3"><a href="#">Copy to all</a></div>
</div>

这些div是动态加载的，因此可能还有很多。我需要一种方法来查找当前ID，然后将其复制到列出的所有其他输入ID中。

因此，在这种情况下，如果我点击第一项上的“复制到所有”链接，其他输入字段将填充“/siteimg/Designs/special-request.jpg”

我需要升级jQuery魔法才能准备就绪。

Answer 1

$(document).ready(function(){
    $('div[id^="copy_to_all"] a').live('click', function(){
        $('.img_url input').val($(this).closest('div.item').find('.img_url input').val())
    });
});

P.S。：你的标记太糟糕了。应该是这样的：

<div class="item">
    <input class="img_url" type="text" value="/siteimg/Designs/special-request.jpg" id="DT_Image_1" name="DT_Image_1" />
    <a class="copy_to_all" href="#">Copy to all</a>
</div>

以及上面的相应功能：

$(document).ready(function(){
    $('a.copy_to_all').live('click', function(){
        $('.img_url').val($(this).prev('.img_url').val())
    });
});

编辑：看到

div动态加载

问题的一部分，将click()更改为live()只是为了安全。

编辑2：奖金工作小提琴with original和with decent markup.

Answer 2

Try This:
<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('a').live('click', function() {
            parentDivTagId = $(this).closest("div").attr("id");
            index = parentDivTagId.substring(12, (parentDivTagId.length));
            copyString = $('#DT_Image_' + index).val();
            $('input:text').val(copyString);
        });
    });
</script>
</head>
<body>

    <div class="item">
        <div class="img_url">
            <input type="text" value="/siteimg/Designs/special-request.jpg"
                id="DT_Image_1" name="DT_Image_1" />
        </div>
        <div id="copy_to_all_1">
            <a href="#">Copy to all</a>
        </div>
    </div>

    <div class="item">
        <div class="img_url">
            <input type="text" value="" id="DT_Image_2" name="DT_Image_2" />
        </div>
        <div id="copy_to_all_2">
            <a href="#">Copy to all</a>
        </div>
    </div>

    <div class="item">
        <div class="img_url">
            <input type="text" value="" id="DT_Image_3" name="DT_Image_3" />
        </div>
        <div id="copy_to_all_3">
            <a href="#">Copy to all</a>
        </div>
    </div>

</body>
</html>

将一个输入字段复制到jQuery中的一组其他输入字段

2 个答案: