如何在jQuery中获取新元素的第N个子元素

Question

我使用jquery创建了一行表格：

var tableRow = $("<tr>").append($("<td>").text("one"))
                        .append($("<td>").text("two"))
                        .append($("<td>").text("three"));

现在我将其添加到文档中的表格中：

$("#table_id").append(tableRow);

接下来我想要做的是在上述创建的tableRow中设置一些单元格的点击事件。为此，我想使用nth-child选择器。但是从文档中可以看出，它只能与某些选择器一起使用：

$("ul li:nth-child(2)")

现在我需要使用:nth-child()来操作一个变量tableRow，怎么做呢？

- maximus

Answer 1

我想使用nth-child选择器来实现那个目的。

在这种情况下，您可以使用.find()

cell = tableRow.find(':nth-child(2)');
cell.on('click', function() {
    ...
});

- techfoobar

---

虽然 find 方法适用于 OP 提到的 特定 结构（因为 td 中没有其他子元素），但更一般的解决方案（仍满足 OP 奇怪的“我想使用 :nth-child”要求）是使用 children 方法，这样就不会获取树中的所有 :nth-child(2) 元素：https://jsfiddle.net/80tnutc8/ - T.J. Crowder

Answer 2

你可以使用 .find() 与 nth-child。

tableRow.find('td:nth-child(2)')

在这种情况下，你可以使用.children()，可能会更好。

tableRow.children('nth-child(2)')

- Arun P Johny

Answer 3

尝试使用.eq()，例如

 $("#table_id tr td:eq(1)")

或者你可以直接从 tableRow 调用

$(tableRow + "tr td:eq(1)")

- GautamD31

Answer 4

您动态创建了元素，因此必须使用以下结构。如果是静态创建（即在HTML中创建），则可以使用您提到的ul。

$('#table_id').find(":nth-child(2n)")

演示

- Thirumalai murugan