使用jQuery获取第二个孩子

$(t).html()

回报

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

我想从$(t)对象中检索第二个td 。我寻找一个解决scheme，但没有为我工作。任何想法如何获得第二个元素？

抓住第二个孩子：

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

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

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

这是一个解决scheme，可能更清晰地阅读代码：

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

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

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

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

在第二个例子中，你可以在select器的开始处去掉'ul' ，因为它是多余的，因为一个ID对于一个页面来说应该是唯一的。这只是为了增加清晰度的例子。

注意性能和内存 ，这两个例子是很好的性能，因为他们不会让jquery保存一个ul元素的列表，后来必须被过滤。

这个怎么样：

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

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

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

但是，另一方面，如果你拿<tr>节点find<td>子节点并运行相同的testing，结果将不一样。

希望能帮助到你。 🙂

尝试这个：

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

要么

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

我没有看到它在这里提到，但你也可以使用CSS规格select器。看文档

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

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

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

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

 t.cells[1].innerHTML

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

没有jQuery：

只要访问父元素的children属性即可。它将返回一个可以被索引访问的子元素的实时HTMLCollection 。如果你想得到第二个孩子：

 parentElement.children[1];

在你的情况下，这样的事情可以工作：（ 例子）

 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>

您也可以使用CSS3select器/ querySelector()的组合，并利用:nth-of-type() 。这个方法在某些情况下可能会更好，因为你也可以指定元素types，在这种情况下td:nth-of-type(2) （例子）

 var secondChild = document.querySelector('.parent > td:nth-of-type(2)'); console.log(secondChild); // <td>element two</td>