使用jQuery获取第二个子项

返回

$(t).html()

test1test2

我想从

$（t）

对象中检索第二个

td

。我在寻找解决办法，但什么都不管用。知道如何获得第二个元素吗？

抓住第二个子元素：

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

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

或者，抓住第二个子项

：

请参阅和的文档。

尝试以下操作：

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

或

---

除了使用jQuery方法外，还可以使用

提供给您的本机

单元格

集合

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

假设

t

是一个DOM元素，您可以绕过jQuery对象创建

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

---

这里有一个解决方案，在代码中阅读可能更清晰：

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

t.cells[1].innerHTML

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

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

在第二个示例中，您可以去掉选择器开头的'ul'，因为它是多余的，因为ID对于单个页面应该是唯一的。 这只是为了让例子更清晰

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

这是怎么回事：

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

---

主要更新： 除了答案看起来多么漂亮之外，您还必须考虑代码的性能。因此，了解

$（t）

变量中的确切内容也是相关的。它是一个

数组，还是一个

节点，其中有几个

s

？ 要进一步说明这一点，请参见

列表中包含50个

子项的jsPerf分数：

到目前为止，

$（t）.first（）.next（）

方法是这里最快的方法

但是，另一方面，如果您使用

节点并找到

子节点并运行相同的测试，结果将不相同

希望有帮助。：）

令人惊讶的是，竟然没有人提到原生JS的实现方式

没有jQuery： 只需访问父元素的。它将返回一组可由索引访问的子元素。如果要获得第二个孩子：

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

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

在您的情况下，类似的方法可能会奏效：

---

我没有看到这里提到的，但是你也可以使用CSS规范选择器

使用

.find（）

方法

$（t）.find（“td:eq（1）”

td:eq（x）//x是要检索的子级的索引。等式（1）表示等于1。
//1表示第二个元素
您可以在jQuery中使用以下两种方法-

使用jQuery:n子选择器
您已经将一个元素的位置作为其参数，该参数为2，因为您要选择第二个li元素。
$（“ul li:n个子项（2）”）。单击（函数（）{
//做点什么
});
虽然我们关心性能，但让我们继续并保留对
ul
的引用，这样我们就不必搜索它。此解决方案比公认的答案具有更好的性能。在某些情况下，我们不希望创建1000个元素，然后使用eq（1）访问第二个子元素；
$（t）.children（'td'）.eq（1）
和
$（t）.children（）[1]
@GreenLei之间有什么区别？首先，第一个返回jQuery对象，第二个返回Node对象这也适用于
find（）
jQuery方法吗？就像在
$（t）.find（'td'）.eq（1）
中获得第二个
，如果
t
是一个表，我需要查找多个节点？我无法获得
.children（'td'）.eq（1）
工作，但
.find（'td'）.eq（1）
工作得很好。要素一要素二如果你评论中的信息与你的答案相关，请通过编辑将详细信息添加到你的帖子中。无论哪种方式，请删除您的评论。自您发表文章以来，技术可能发生了变化，但目前在执行此性能测试时，
$（“#normal:first child”）。next（）
比
$（t）.first（）.next（）
快了20%，现在是最快的。（Chrome 83）非常感谢您提供该测试！是的，我写这篇文章已经7年了。。。如果此时技术/性能没有改变，我会更震惊；）
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>

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

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

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