2

要素のネストレベルをカウントする必要があるというわずかな問題があります。問題は、親要素が複数の子要素を保持でき、子要素が独自の子要素を持つことができることです。

カウントを開始する場所を確認してください (「ここから開始」というテキストでマークされています)。

HTML:

<div class="main_set">
    <div class="child_set">
        <div class="child_set">
            <div class="child_set">I start here!</div>
        </div>
        <div class="child_set"></div>
    </div>
    <div class="child_set">
        <div class="child_set"></div>    
    </div>
</div>

カウント3を取得するためにいくつかのことを試しました。
たとえば、最後の試み：

$(this).closest('.main_set').find('.child_set');

これは明らかに、すべての child_sets を数えて 6 を返します。

ネストのみを考慮してchild_set、開始位置から要素をカウントする方法。main_set基本的に私の例では、カウント3を取得する方法は?

4

4 に答える 4

8

parent() fromを使用thisして、(特別なセレクターを使用して) すべての親を見つけることができます。長さについては、現在のものを追加する必要があります。

alert($(this).parents('.child_set').length + 1);

この例も参照してください。

于 2012-07-10T18:11:37.880 に答える
1

stopPropagation を呼び出す必要があります。そうしないと、親イベントが同じクラスであるため、親イベントが呼び出されますchild_set。

 $('.main_set').on('click', '.child_set', function(e) {
        e.stopPropagation();
        console.log($(this).parents('.child_set').andSelf().length);
    });

ワーキングデモ

この他のデモを見てください:リンク
ここでは、どの div でも機能することがわかります。

于 2012-07-10T18:17:26.953 に答える
1

child_setというdiv から始まるすべてをカウントしたい場合はI start here!、次のようにします。

$(this).parents('.child_set').length + 1

これにより、 が得られます3。1テキストを含むdivにI start here!もchild_setクラスがあるため、が追加されます。

ドキュメンテーション：

于 2012-07-10T18:13:29.940 に答える
0

.children()の代わりに使用.find()

ここではっきり言った

.children() メソッドは .find() とは異なり、.children() は DOM ツリーを 1 レベル下に移動するだけですが、.find() は複数のレベルを下に移動して子孫要素 (孫など) も選択できます。

于 2012-07-10T18:10:29.933 に答える