我正在尝试设置嵌套表函数。所以在函数中我传递了一个选定的元素,我只想选择该表的子/直接后代 td
/tr
而不是嵌套表的 td
/tr
元素。这是我设置的一个小例子。
<table class="top">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>
<table class="nested">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="results"></div>
和与之配套的 jQuery/Javascript...
var tbl = $(".top");
var r = $("div#results");
$(r).html("");
$(r).append("var tbl = $(\".top\")</br>")
$(r).append("$(tbl).find(\"td\").length:" + $(tbl).find("td").length.toString() + "</br>");
$(r).append("$(\"td\", tbl).length: " + $("td", tbl).length.toString() + "</br>");
$(r).append("$(tbl).children(\"tbody\").children(\"tr\").children(\"td\").length: " + $(tbl).children("tbody").children("tr").children("td").length.toString() + "</br>");
结果如下……
var tbl = $(".top") (模拟传递的选择器)
$(tbl).find("td").length:12 (选择所有 td 元素)
$("td", tbl).length: 12 (选择所有td元素,同上)
$(tbl).children("tbody").children("tr").children("td").length: 6 (选择合适的元素,但是jQuery链似乎太长太严格为了我想做的事)
非常感谢为顶级表格的子元素找到合适的选择器的任何帮助!谢谢!
更新:这里是 jsFiddle .
最佳答案
使用直接后代 (>
) 选择器的工作 fiddle :http://jsfiddle.net/3T9sN/
$(function(){
var rows = $(".top > TBODY > TR");
alert( "Number of rows: " + rows.length );
var cells = $(".top > TBODY > TR > TD");
alert( "Number of cells : " + cells.length );
});
当然,你可以在这里复用一些context,让查询更加高效,比如:
var tbody = $(".top > tbody");
// using children() method
var rows = tbody.children( "TR" );
// using selector context
var cells = $( "> TR > TD", tbody );
alert( "Number of rows: " + rows.length );
alert( "Number of cells : " + cells.length );
fiddle :http://jsfiddle.net/3T9sN/1/
关于带有嵌套表的 jQuery,使用传递的选择器选择外部表 tr/td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11729211/