0

次のようなDOMがあるとします。

<body>
<div class="a" data="a"><!-- 1 -->
    <div>
        <div class="a" data="b"><!-- 2 -->
        </div>
    </div>
    <div class="a" data="c"><!-- 3 -->
        <div class="a" data="d"><!-- 4 -->
            <div class="a" data="e"><!-- 5 -->

            </div>
        </div>
        <div class="a" data="f"><!-- 6 -->
            <div class="a" data="g"><!-- 7 -->

            </div>
        </div>
    </div>
</div>
<div>
    <div class="a" data="h"><!-- 8 -->

    </div>
</div>
</body>

クラスを持つ一致した要素の最上位要素を選択するにはどうすればよいaですか?

たとえば$('body').selector...、1 と 8 $('[data="a"]').selector...を選択する必要があります。2 と 3 $('[data="c"]').selector...を選択する必要があります。4 と 6 を選択する必要があります。html 構造は単なる例であり、他の構造を持つこともできます。

4

3 に答える 3

0

私は自分のセレクターを追加して解決しました：

$.fn.topLevel = function(sel) {
    var master = $(this);
  return master.find(sel).filter(function() {
    return $(this).parentsUntil(master,sel).length == 0;
  });
};

しかし、私はまだもっとトリッキーな解決策があると思います。

于 2013-03-29T23:36:09.183 に答える
0

これはそれを行うようです：

$(".a:not(.a .a)")
于 2013-03-29T23:02:37.713 に答える
0

このようなことを行う良い (少しトリッキーですが) 方法は、逆に考えることです。(あなたの例では) 1 と 8 を見つけるには、次のようにします。

var oneAndEight = $('.a').filter(function() {
  return $(this).parents('.a').length === 0;
});

これがすべての「.a」要素で、DOM ルートに近い他の「.a」要素はありません。2 と 3 を取得するには、要素とルートの間に「.a」が 1 つだけあるものを探します。

一般化するために、単純なプラグインを次に示します。

$.atDepth = function(sel, depth) {
  return $(sel).filter(function() {
    return $(this).parents(sel).length == depth;
  });
});

1 と 8 を取得するには:

var oneAndEight = $.atDepth(".a", 0);

5 と 7 の場合:

var fiveAndSeven = $.atDepth(".a", 3);

CSSセレクター構文には「xを含まないもの」メカニズムがないため、これは単純なセレクターでは実行できないと思います。

編集—これは jsbinです。

于 2013-03-29T22:34:00.360 に答える