使用jQuery获取第二个孩子

$(t).html()

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

我想从$(t)对象中检索第二个td。我寻找解决办法，但没有一个对我有效。知道怎么得到第二个元素吗?

当前回答

除了使用jQuery方法，您还可以使用<tr>提供给您的本机单元格集合。

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

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

t.cells[1].innerHTML

其他回答

我在这里没有看到它，但你也可以使用CSS规范选择器。查看文档

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

抓住第二个孩子:

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

或者，获取第二个子元素<td>:

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

参见儿童和eq的文档。

试试这个:

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

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

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

你也可以使用CSS3选择器/ querySelector()的组合，并利用:n -of-type()。这种方法在某些情况下可能工作得更好，因为您还可以指定元素类型，在本例中为td:n -of-type(2)(示例)

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

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

如何:

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

主要更新:

除了答案看起来有多漂亮，您还必须考虑代码的性能。因此，知道$(t)变量中到底有什么也是相关的。它是一个<TD>的数组还是一个包含几个<TD>的<TR>节点? 为了进一步说明这一点，请参阅<ul>列表中包含50个<li>子元素的jsPerf分数:

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

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

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

希望能有所帮助。：）

推荐文章