Question

如何向第二个和第三个td添加内容？

我刚发现以下内容无效。我可以通过创建一些变量来保存找到的元素，但是如果可以的话，我想学习更清晰的“更多jQueryish”方法。

<tr id="clone"><td></td><td></td><td></td></tr>

$.each(records, function( index, row ) {
    $('#clone').clone()
    .removeAttr('id')
    .find('td')
    .eq(1).text(row.name).parent()
    .eq(2).text(row.message).parent()
    .appendTo(content)
});

Answer 1

您需要使用.end()代替parent()

结束当前链中最近的过滤操作，并将匹配元素集返回到先前的状态。

$('#clone').clone()
  .removeAttr('id')
  .find('td')
  .eq(1).text('Added 1').end()
  .eq(2).text('Added 2').end()
  .appendTo('table')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<table>
  <tr id="clone">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

但是我更喜欢在变量中引用克隆元素。

var clonedElement = $('#clone').clone()
  .removeAttr('id');

//Manipulate element
var tds = clonedElement.find('td');
tds.eq(1).text('Added 1');
tds.eq(2).text('Added 2');

//Append it
clonedElement.appendTo('table');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<table>
  <tr id="clone">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 2

我相信，你所寻找的东西可能如下：

$('#clone').clone()
.removeAttr('id')
.find('td')
 .eq(1).text(row.name).end()
 .eq(2).text(row.message).end()
 .appendTo(content)

end()会让您回到之前的选择，而parent()会在DOM模型中引用您一个级别。

Answer 3

通过存储克隆变量和td获得的find()而不是尝试制作一个长链，将来更容易阅读

$.each(records, function( index, row ) {
    var $clone = $('#clone').clone().removeAttr('id');
    var $td = $clone.find('td');
    $td.eq(1).text(row.name);
    $td.eq(2).text(row.message);
    content.append( $clone);
});

请注意，代码量的长度没有显着差异

使用jQuery将内容添加到find（）返回的多个元素

3 个答案: