$(t).html()
返回
<td>test1</td><td>test2</td>
我想从$(t)对象中检索第二个td。我寻找解决办法,但没有一个对我有效。知道怎么得到第二个元素吗?
$(t).html()
返回
<td>test1</td><td>test2</td>
我想从$(t)对象中检索第二个td。我寻找解决办法,但没有一个对我有效。知道怎么得到第二个元素吗?
抓住第二个孩子:
$(t).children().eq(1);
或者,获取第二个子元素<td>:
$(t).children('td').eq(1);
参见儿童和eq的文档。
除了使用jQuery方法,您还可以使用<tr>提供给您的本机单元格集合。
$(t)[0].cells[1].innerHTML
假设t是一个DOM元素,您可以绕过jQuery对象创建。
t.cells[1].innerHTML
这里有一个解决方案,可能在代码中读起来更清楚:
获取一个无序列表的第2个子元素:
$('ul:first-child').next()
还有一个更详细的例子: 这段代码获取UL的第二个子元素的'title'属性的文本,标识为'my_list':
$('ul#my_list:first-child').next().attr("title")
在第二个例子中,您可以去掉选择器开头的'ul',因为它是多余的,因为ID对于单个页面应该是唯一的。 这样做只是为了让例子更清晰。
在性能和内存方面注意,这两个例子的性能都很好,因为它们没有让jquery保存一个ul元素的列表,而这些元素必须经过筛选。
如何:
$(t).first().next()
主要更新:
除了答案看起来有多漂亮,您还必须考虑代码的性能。因此,知道$(t)变量中到底有什么也是相关的。它是一个<TD>的数组还是一个包含几个<TD>的<TR>节点? 为了进一步说明这一点,请参阅<ul>列表中包含50个<li>子元素的jsPerf分数:
http://jsperf.com/second-child-selector
到目前为止,$(t).first().next()方法是这里最快的。
但是,另一方面,如果取<tr>节点并找到<td>子节点并运行相同的测试,结果将不相同。
希望能有所帮助。:)
令人惊讶的是,没有人提到原生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>
你可以使用jQuery中的两个方法,如下所示-
使用jQuery:n -child选择器 你已经把一个元素的位置作为它的参数,它是2,因为你想选择第二个li元素。 $("ul li:n -child(2)").click(函数(){ / /做某事 });
使用jQuery:eq()选择器
如果想要获得确切的元素,则必须指定该项的索引值。列表元素以索引0开始。要选择li的第2个元素,必须使用2作为参数。
$( “ul li:eq(1)” ).click(function(){ 做点什么 });
在jQuery中获取List的第二个子元素