2

ネストされた表関数をセットアップしようとしています。そのため、関数内で選択した要素を渡しています。ネストされたテーブルの/要素ではなく、そのテーブルの子/直系の子孫td/のみを選択したいと考えています。ここに私がセットアップした小さな例があります。trtdtr

<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 
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 に答える
0

セレクターに加えて親を渡して、子の要素を見つけます

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

と同じ

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

最初ははるかに短い構文です

于 2012-07-30T20:44:57.320 に答える