4

受け取ったさまざまな回答に基づいて、独自のセレクター関数を実装せずに jQuery を使用する唯一の解決策は、「:first」または jQuery の「.eq(0)」が続く基本的なセレクターです。

それらが何らかの種類の最大深度オプションまたは「最初の結果のみを取得してから返す」のような関数であるかどうかを知りたかったのですが、セレクターの :first でさえ a よりも高速ではないように見えるため、jQuery では使用できないようです.eq(0) への呼び出し すべてのコメントに感謝します。

元の投稿:

子要素に「最も近い」のような機能が利用できるかどうか疑問に思っています。

私がそのようなhtml構造を持っているとしましょう:

div.container > [* 一部の要素、children() は使用できません] > div.sub1 > div.sub2 > div.sub1 > [その他のさまざまな子要素]

最初の div.sub1 が必要な場合は、次のようにしています。

$("div.container").find("div.sub1").eq(0)

問題は、「最大深度」を指定できないため、すべての子で検索されることです。パフォーマンスの問題だと思います。

「最大深度」について話しているのは、可能なセレクターのケースをリストできるためですが、ケースによっては約 6 ～ 10 項目の長いリストになります。

誰にもこれに対する解決策がありますか？

ありがとうございました

4

1 に答える 1

7

>子セレクター ( ) とワイルドカード ( *) をさまざまな量で組み合わせることで、これを取得できる可能性があります。

// max-depth: grand-children
$('.container').find('> .sub1, > * > .sub1').first();

// max-depth: great-grand-children
$('.container').find('> .sub1, > * > .sub1, > * > * > .sub1').first();

また、これをハードコーディングするのはかなり面倒なので、カスタム メソッドを使用してセレクターを作成できます。

jQuery.fn.findAtDepth = function (selector, maxDepth) {
    var depths = [], i;

    if (maxDepth > 0) {
        for (i = 1; i <= maxDepth; i++) {
            depths.push('> ' + new Array(i).join('* > ') + selector);
        }

        selector = depths.join(', ');
    }

    return this.find(selector);
};

$('.container').findAtDepth('.sub1', 3).first();

例: http://jsfiddle.net/V82f3/2/

これの主な落とし穴は、比較的単純なセレクター (または単一のセレクターのみ) に限定されていることです。

$('.container').findAtDepth('.sub1, .sub2', 3).first();

これは.sub1、最大深度 3 で検索しますが、.sub2任意の深度で検索します。

于 2012-01-25T18:58:41.973 に答える