使用 jQuery 获取第二个孩子

Question

$(t).html()

返回

<td>test1</td><td>test2</td>

我想从$(t) 对象中检索第二个td。我寻找了一个解决方案，但对我没有任何帮助。知道如何获得第二个元素吗？

Answer 1

抓住第二个孩子：

$(t).children().eq(1);

或者，抢第二个孩子<td>：

$(t).children('td').eq(1);

请参阅 children 和 eq 的文档。

Answer 2

这是一个在代码中读起来可能更清晰的解决方案：

获取无序列表的第二个孩子：

   $('ul:first-child').next()

还有一个更详细的例子： 此代码获取标识为 'my_list' 的 UL 的第二个子元素的 'title' 属性的文本：

   $('ul#my_list:first-child').next().attr("title")

在第二个示例中，您可以去掉选择器开头的 'ul'，因为它是多余的，因为 ID 应该是唯一的单页。 它只是为了增加示例的清晰度。

注意性能和内存，这两个示例的性能很好，因为它们不会让 jquery 保存必须在之后过滤的 ul 元素列表。

Answer 3

我没有看到这里提到它，但您也可以使用 CSS 规范选择器。 See the docs

$('#parentContainer td:nth-child(2)')

Answer 4

怎么样：

$(t).first().next()

---

重大更新：

除了答案看起来多么漂亮之外，您还必须考虑代码的性能。因此，知道$(t) 变量中究竟是什么也是相关的。它是<TD> 的数组还是其中有几个<TD>s 的<TR> 节点？ 为了进一步说明这一点，请查看 <ul> 列表中的 jsPerf 分数，其中包含 50 个 <li> 子项：

http://jsperf.com/second-child-selector

$(t).first().next() 方法是目前最快的。

但是，另一方面，如果您使用 <tr> 节点并找到 <td> 子节点并运行相同的测试，结果将不一样。

希望对您有所帮助。 :)

Answer 5

试试这个：

$("td:eq(1)", $(t))

或

$("td", $(t)).eq(1)

Answer 6

除了使用 jQuery 方法之外，您还可以使用 <tr> 为您提供的原生 cells 集合。

$(t)[0].cells[1].innerHTML

假设t是一个DOM元素，你可以绕过jQuery对象的创建。

t.cells[1].innerHTML

Answer 7

_{令人惊讶的是，没有人提到原生 JS 的方式来做到这一点..}

没有 jQuery：

只需访问父元素的children property。它将返回可以通过索引访问的子元素的live HTMLCollection。如果你想生二胎：

parentElement.children[1];

在你的情况下，这样的事情可能会起作用：(example)

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

您还可以结合使用 CSS3 选择器 / querySelector() 和使用 :nth-of-type()。这种方法在某些情况下可能效果更好，因为您还可以指定元素类型，在这种情况下td:nth-of-type(2)(example)

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>

Answer 8

使用.find()方法

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

Answer 9

您可以在 jQuery 中使用两种方法，如下所示-

使用 jQuery :nth-child 选择器 您已将元素的位置作为其参数，即 2，因为您要选择第二个 li 元素。

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

使用 jQuery :eq() 选择器

如果要获取确切的元素，则必须指定项目的索引值。列表元素以索引 0 开始。要选择 li 的第二个元素，您必须使用 2 作为参数。

$( "ul li:eq(1)" ).click(function(){
  //do something
});

参见示例：Get Second Child Element of List in jQuery