Question

我正在尝试设置嵌套表函数。所以在函数中我传递了一个选定的元素，我想只选择该表的子/直接后代td / tr而不是嵌套表的td / {{1元素。这是我设置的一个小例子。

tr

和jQuery / Javascript一起去...

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

结果如下......

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

使用直接后裔（>）选择器工作小提琴：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/

Answer 2

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

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

与

相同

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

第一个是更短的语法

Answer 3

var tbl = $('.top');
var stuff = tbl.find('table').filter(function(){
  $('#results').append($('tr, td', this).length);
});

通常，你会在filter函数中使用return，但我们不想返回元素，我们想要使用从它们中提取的数据。为此，请不要使用'return'方法。

Standard-issue jsFiddle...

Answer 4

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

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

4 个答案: