2

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

4

4 回答 4

1

使用直接后代（>）选择器的工作小提琴：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 );
});​

当然，你也可以在这里复用一些上下文，让查询更加高效，比如：

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 );

小提琴：http: //jsfiddle.net/3T9sN/1/

于 2012-07-30T20:46:08.147 回答
0

除了选择器之外，还传递父项以在子项中查找您的元素

     $("what your looking for ", parent);

如同

     $(parent).children("what you are looking for")

第一个是更短的语法

于 2012-07-30T20:44:57.320 回答
0 
var tbl = $('.top');
var stuff = tbl.find('table').filter(function(){
  $('#results').append($('tr, td', this).length);
});

通常，您会在过滤器函数中使用 return，但我们不想返回元素，我们想使用从它们中抽象出来的数据。为此，请勿使用“return”方法。

标准问题 jsFiddle...

于 2012-07-30T20:51:13.683 回答
0

$('tr:not(tr tr)'). 可能比使用后代选择器慢，但更灵活。

于 2012-07-31T11:49:48.790 回答