0

次のようなテーブルがあります。

<table id="table">
    <tbody>
        <tr></tr>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr></tr>
                    </tbod>
                </table>
            </td>
        </tr>
     </tbody>
</table>

私はjQueryを使用しており、最も外側のテーブルを取得するための格納されたセレクターが存在します:

var x = $('#table')

それから始めて、すべての最初のレベルの 要素を取得したい場合<tr>。

私がそれらのいずれかを使用する場合:

x.find('tbody > tr');
x.children('tbody').children();

…最初のものは、ネストされたすべての要素も自然に選択します<tr>。後者は複雑すぎるようで、複数のクエリが含まれます。

これをより速く/より効率的にする方法はありますか?

4

3 に答える 3

2

まず、x.find('tbody > tr')すべての s を検索します<tr>。x.find('> tbody > tr')あなたの例からだと仮定するxと、あなたはする必要がありxます。

私は両方でテストを実行しましたが、これが私の発見でした。

.children(): 3.013ms
>: 0.626ms

したがって、>メソッドはメソッドよりも高速です.children()。関数呼び出しが加算されます...かろうじて。

これがテスト用の私の JavaScript です。

var $table = $('#table'), $usingChildren, $usingAngleBracket;

console.time('.children()');
$usingChildren = $table.children('tbody').children('tr');
console.timeEnd('.children()');

console.time('>');
$usingAngleBracket = $table.find('> tbody > tr');
console.timeEnd('>');

console.log( $usingChildren, $usingAngleBracket );
于 2013-09-19T11:19:30.920 に答える
0

.first()jQuery のメソッドを使用して最初の<tr>要素を見つけることができます。

$('#mytable tr').first()

ただし、ネストされた<tr>子要素を持つ最初のものを見つけたい場合は、 でフィルタリングできます。例: http://jsfiddle.net/cwL4q/3/.has()

$("#mytable tr").has('tbody').first().css("background-color", "red" );

ただし、「ネストされた」にクラスのラベルを付けることを強くお勧め<tr>します。そうすれば、ご存知のように、はるかに迅速にアクセスできます。

$('.nestedrow');

以下の HTML の場合:

<table id="table">
        <tbody>
            <tr></tr>
            <tr class="nestedrow">
                <td>
                    <table>
                        <tbody>
                            <tr></tr>
                        </tbod>
                    </table>
                </td>
            </tr>
         </tbody>
    </table>
于 2013-09-19T10:49:59.290 に答える