使用jQuery获取第二个孩子

时间:2011-01-18 17:48:28

标签: jquery jquery-selectors

$(t).html()

返回

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

我想从td对象中检索第二个$(t)。我搜索了一个解决方案,但没有任何对我有用。知道如何获得第二个元素吗?

9 个答案:

答案 0 :(得分:315)

抓住第二个孩子:

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

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

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

答案 1 :(得分:24)

这是一个可能在代码中更清晰的解决方案:

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

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

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

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

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

关于性能和内存的注意事项,这两个示例是良好的性能,因为它们不会使jquery保存一个 ul 元素的列表,之后必须进行过滤。

答案 2 :(得分:20)

这是怎么回事:

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

主要更新:

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

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

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

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

希望它有所帮助。 :)

答案 3 :(得分:11)

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

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

答案 4 :(得分:9)

试试这个:

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

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

答案 5 :(得分:7)

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

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

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

t.cells[1].innerHTML

答案 6 :(得分:3)

令人惊讶的是,没有人提到原生的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>

答案 7 :(得分:1)

您可以在jQuery中使用以下两种方法-

使用jQuery:nth-​​child Selector 要选择第二个li元素,已将元素的位置作为其自变量2。

$( "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

答案 8 :(得分:0)

使用.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