带有嵌套表的 jQuery，使用传递的选择器选择外部表 tr/td

Question

我正在尝试设置嵌套表函数。所以在函数中我传递了一个选定的元素，我只想选择该表的子/直接后代 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 .

Answer 1

使用直接后代 (>) 选择器的工作 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/