下面你会找到一段代码。一个带有两个子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>
答案 0 :(得分: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
答案 1 :(得分:1)
这样的东西?
$("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);
});
});