使用 jQuery 获取第二个孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4727263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get second child using jQuery
提问by Upvote
$(t).html()
returns
返回
<td>test1</td><td>test2</td>
I want to retrieve the second tdfrom the $(t)object. I searched for a solution but nothing worked for me. Any idea how to get the second element?
我想td从$(t)对象中检索第二个。我寻找了一个解决方案，但没有任何效果对我有用。知道如何获得第二个元素吗？
回答by davin
grab the second child:
抓住第二个孩子：
$(t).children().eq(1);
or, grab the second child <td>:
或者，抓住第二个孩子<td>：
$(t).children('td').eq(1);
回答by stackex
Here's a solution that maybe is clearer to read in code:
这是一个在代码中可能更清晰的解决方案：
To get the 2nd child of an unordered list:
获取无序列表的第二个孩子：
$('ul:first-child').next()
And a more elaborated example: This code gets the text of the 'title' attribute of the 2nd child element of the UL identified as 'my_list':
还有一个更详细的示例：此代码获取标识为“my_list”的 UL 的第二个子元素的“title”属性的文本：
$('ul#my_list:first-child').next().attr("title")
In this second example, you can get rid of the 'ul'at the start of the selector, as it's redundant, because an ID should be unique to a single page. It's there just to add clarity to the example.
在第二个示例中，您可以去掉选择器开头的'ul'，因为它是多余的，因为 ID 对单个页面应该是唯一的。它只是为了增加示例的清晰度。
Note on Performance and Memory, these two examples are good performants, because they don't make jquery save a list of ulelements that had to be filtered afterwards.
注意Performance 和 Memory，这两个示例性能良好，因为它们不会让 jquery 保存之后必须过滤的ul元素列表。
回答by kumarharsh
How's this:
这个怎么样：
$(t).first().next()
MAJOR UPDATE:
主要更新：
Apart from how beautiful the answer looks, you must also give a thought to the performance of the code. Therefore, it is also relavant to know what exactly is in the $(t)variable. Is it an array of <TD>or is it a <TR>node with several <TD>sinside it?
To further illustrate the point, see the jsPerf scores on a <ul>list with 50 <li>children:
除了答案看起来有多漂亮之外，您还必须考虑代码的性能。因此，了解$(t)变量中的确切内容也很重要。它是一个数组<TD>还是一个里面<TR>有几个的节点<TD>s？为了进一步说明这一点，请参阅<ul>包含 50 个<li>孩子的列表中的 jsPerf 分数：
http://jsperf.com/second-child-selector
http://jsperf.com/second-child-selector
The $(t).first().next()method is the fastest here, by far.
$(t).first().next()到目前为止，该方法在这里是最快的。
But, on the other hand, if you take the <tr>node and find the <td>children and and run the same test, the results won't be the same.
但是，另一方面，如果您获取<tr>节点并找到<td>子节点并运行相同的测试，结果将不一样。
Hope it helps. :)
希望能帮助到你。:)
回答by Just Plain High
I didn't see it mentioned here, but you can also use CSS spec selectors. See the docs
我没有看到这里提到它，但您也可以使用 CSS 规范选择器。查看文档
$('#parentContainer td:nth-child(2)')
回答by Chandu
Try this:
尝试这个：
$("td:eq(1)", $(t))
or
或者
$("td", $(t)).eq(1)
回答by user113716
In addition to using jQuery methods, you can use the native cellscollection that the <tr>gives you.
除了使用 jQuery 方法之外，您还可以使用 jQuery 提供的本机cells集合<tr>。
$(t)[0].cells[1].innerHTML
Assuming tis a DOM element, you could bypass the jQuery object creation.
假设t是一个 DOM 元素，您可以绕过 jQuery 对象创建。
t.cells[1].innerHTML
回答by Josh Crozier
It's surprising to see that nobody mentioned the native JS way to do this..
令人惊讶的是，没有人提到原生 JS 方法来做到这一点..
Without jQuery:
没有 jQuery：
Just access the childrenpropertyof the parent element. It will return a live HTMLCollectionof children elements which can be accessed by an index. If you want to get the second child:
只需访问父元素的children属性。它将返回一个可以通过索引访问的子元素的实时 HTMLCollection。如果你想要第二个孩子：
parentElement.children[1];
In your case, something like this could work: (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>
You can also use a combination of CSS3 selectors / querySelector()and utilize :nth-of-type(). This method may work better in some cases, because you can also specifiy the element type, in this case td:nth-of-type(2)(example)
您还可以结合使用 CSS3 选择器 /querySelector()并使用:nth-of-type(). 这种方法在某些情况下可能效果更好，因为您还可以指定元素类型，在这种情况下td:nth-of-type(2)（示例）
var secondChild = document.querySelector('.parent > td:nth-of-type(2)');
console.log(secondChild); // <td>element two</td>
回答by Josh Crozier
Use .find()method
使用.find()方法
$(t).find("td:eq(1)");
$(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
td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1.
//1 denote second element
回答by user8126644
You can use two methods in jQuery as given below-
您可以在 jQuery 中使用两种方法，如下所示 -
Using jQuery :nth-child SelectorYou have put the position of an element as its argument which is 2 as you want to select the second li element.
使用 jQuery :nth-child Selector你已经把一个元素的位置作为它的参数，因为你想选择第二个 li 元素。
$( "ul li:nth-child(2)" ).click(function(){
//do something
});Using jQuery :eq() Selector
使用 jQuery :eq() 选择器
If you want to get the exact element, you have to specify the index value of the item. A list element starts with an index 0. To select the 2nd element of li, you have to use 2 as the argument.
如果要获取确切的元素，则必须指定项目的索引值。列表元素以索引 0 开始。要选择 li 的第二个元素，您必须使用 2 作为参数。
$( "ul li:eq(1)" ).click(function(){
//do something
});See Example: Get Second Child Element of List in jQuery
请参见示例：在 jQuery 中获取列表的第二个子元素
