如何在新元素的jquery中获取第n个孩子答案

【问题标题】：How to get nth child in jquery of a new element如何在新元素的jquery中获取第n个孩子
【发布时间】：2017-09-22 18:12:40
【问题描述】：

我已经使用 jquery 创建了表格行：

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

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

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

接下来我要做的是在上面创建的 tableRow 的某些单元格上设置点击事件。我想为此目的使用第 n 个子选择器。但是从文档看来，它似乎可以与一些选择器一起使用，例如：

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

但现在我需要将:nth-child() 用于变量tableRow。怎么可能？

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

我想为此目的使用第 n 个子选择器。

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

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

【讨论】：

虽然 find 适用于 OP 提到的 specific 结构（因为 tds 中没有元素），但更通用的解决方案（仍然满足 OP 的奇怪的“我想使用:nth-child 要求）将是children，所以你没有得到所有树中的:nth-child(2)元素：jsfiddle.net/80tnutc8

【解决方案2】：

您可以将.find() 与nth-child 一起使用

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

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

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

【讨论】：

【解决方案3】：

试试.eq() 喜欢

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

或者你可以直接从tableRow调用

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

【讨论】：

【解决方案4】：

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

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

DEMO

【讨论】：