使用 jQuery 获取第二个孩子
Posted
技术标签:
【中文标题】使用 jQuery 获取第二个孩子【英文标题】:Get second child using jQuery 【发布时间】:2011-06-11 06:24:09 【问题描述】:$(t).html()
返回
<td>test1</td><td>test2</td>
我想从$(t)
对象中检索第二个td
。我寻找了一个解决方案,但对我没有任何帮助。知道如何获得第二个元素吗?
【问题讨论】:
【参考方案1】:抓住第二个孩子:
$(t).children().eq(1);
或者,抢第二个孩子<td>
:
$(t).children('td').eq(1);
请参阅 children
和 eq
的文档。
【讨论】:
$(t).children('td').eq(1)
和$(t).children()[1]
有什么区别
@GreenLei 一开始第一个返回一个jQuery对象,第二个返回一个Node对象
这也适用于find()
jQuery 方法吗?就像在$(t).find('td').eq(1)
中获得第二个<td>
一样,如果t
是一个表,我需要查看多个节点?
由于某种原因我无法让.children('td').eq(1)
工作,但.find('td').eq(1)
工作正常。【参考方案2】:
这是一个在代码中读起来可能更清晰的解决方案:
获取无序列表的第二个孩子:
$('ul:first-child').next()
还有一个更详细的例子: 此代码获取标识为 'my_list' 的 UL 的第二个子元素的 'title' 属性的文本:
$('ul#my_list:first-child').next().attr("title")
在第二个示例中,您可以去掉选择器开头的 'ul',因为它是多余的,因为 ID 应该是唯一的单页。 它只是为了增加示例的清晰度。
注意性能和内存,这两个示例的性能很好,因为它们不会让 jquery 保存必须在之后过滤的 ul 元素列表。
【讨论】:
虽然我们关心性能,但让我们继续保持对ul
的引用,这样我们就不必搜索它了。
此解决方案的性能比公认的答案更好。在某些情况下,我们不想创建 1000 个元素,然后使用 eq(1) 访问第二个子元素;【参考方案3】:
我没有看到这里提到它,但您也可以使用 CSS 规范选择器。 See the docs
$('#parentContainer td:nth-child(2)')
【讨论】:
【参考方案4】:怎么样:
$(t).first().next()
重大更新:
除了答案看起来多么漂亮之外,您还必须考虑代码的性能。因此,知道$(t)
变量中究竟是什么也是相关的。它是<TD>
的数组还是其中有几个<TD>s
的<TR>
节点?
为了进一步说明这一点,请查看 <ul>
列表中的 jsPerf 分数,其中包含 50 个 <li>
子项:
http://jsperf.com/second-child-selector
$(t).first().next()
方法是目前最快的。
但是,另一方面,如果您使用 <tr>
节点并找到 <td>
子节点并运行相同的测试,结果将不一样。
希望对您有所帮助。 :)
【讨论】:
技术可能在您发帖后发生了变化,但目前在执行此性能测试时,$('#normal:first-child').next()
比 $(t).first().next()
高出 20%,现在是最快的。 (Chrome 83)非常感谢您提供该测试!
是的,我写这篇文章已经 7 年了(!?)...如果此时技术/性能没有改变,我会更加震惊;)【参考方案5】:
试试这个:
$("td:eq(1)", $(t))
或
$("td", $(t)).eq(1)
【讨论】:
:eq
在 jQuery 3.4 中已弃用。【参考方案6】:
除了使用 jQuery 方法之外,您还可以使用 <tr>
为您提供的原生 cells
集合。
$(t)[0].cells[1].innerHTML
假设t
是一个DOM元素,你可以绕过jQuery对象的创建。
t.cells[1].innerHTML
【讨论】:
【参考方案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>
【讨论】:
【参考方案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
【讨论】:
元素一 | 元素二 |
:eq
在 jQuery 3.4 中已弃用。【参考方案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
【讨论】:
:eq
在 jQuery 3.4 中已弃用。以上是关于使用 jQuery 获取第二个孩子的主要内容,如果未能解决你的问题,请参考以下文章