Question

下面你会找到一段代码。一个带有两个子div的容器，每个子div包含一个表。一个是填充另一个不是。第二个表上方的[A]应该将第一个表的内容复制到第二个表中。

<div class="example-code">
   <div class="content-box">
          <div class="content-box-wrapper">
                 <table id="carTable-20685519" data-car-id="20685519">
                        <tr><td>Dummy Data 1 <input type="text" name="car[20685519]"</td></tr>       
                 </table>
          </div>
   </div>
   <div class="content-box">
          <div class="content-box-wrapper">
                 <a id="copy-20685519">Copy from above table</a>
                 <table id="carTable-206823698" data-car-id="206823698">    
                 </table>
          </div>
   </div>
</div>

我为此创建了一些JQuery。但是，看起来prev（）不会在当前div之外搜索。我怎样才能使这个工作？

<script>

$("a[id^='copy']").on('click', function () {

    console.log('Clicked');

    var id = $(this).next("table").attr('data-car-id'),
            previousId = $(this).prev('table').attr('data-car-id'),
    html = $(this).prev("table[id^='carTable-']").prop('innerHTML');

    $(this).next("table").html(html).find('input').each(function () {
        this.name = this.name.replace(previousId, id);
    });
});

</script>

Demo in JSFiddle

Answer 1

他们在不同的分支。使用closest向上搜索find以向下搜索。使用first()匹配源表（这是祖父父div中两个表中的第一个）：

e.g。

$("a[id^='copy']").on('click', function () {

    console.log('Clicked');

    var $table = $(this).next("table");
    var id = $.attr('data-car-id'),
        previousId = $table.attr('data-car-id'),
    html = $table.closest('.example-code').find("table[id^='carTable-']").first().html();

    $table.html(html).find('input').each(function () {
        this.name = this.name.replace(previousId, id);
    });
});

另外，保存jQuery选择器的结果，而不是一遍又一遍地重新查询（更快）。例如var $table

JSFiddle： http://jsfiddle.net/TrueBlueAussie/90jtudd4/2/

Answer 2

这样的东西？

$("a[id^='copy']").on('click', function () {
    var previous = null;
    var tables = $('table');
    var index = tables.index($(this).next("table"));
    if (index > 0) {
        previous = $(tables[index-1])
    }
    $(this).next("table").html($(previous).html()).find('input').each(function () {
        this.name = this.name.replace(previousId, id);
    });
});

http://jsfiddle.net/90jtudd4/1/

获取div之外的上一个表的内容

2 个答案: