web-dev-qa-db-ja.com

jQueryを使用して、特定のCSSクラスを持つコンテナーの子ではない要素の子孫を取得します

特定の要素のすべての子孫を選択する必要がある状況がありますが、excludeセレクターを実行するコンテナーのCSSクラスと等しいコンテナーの子です。

かなり複雑な説明。

<div class="container">
   <div class="element"></div>
   <div class="element"></div>
   <div class="element"></div>
   <div class="element">
       <div class="container">
           <div class="element"></div>
           <div class="element"></div>
           <div class="element"></div>
       </div>
   </div>

最も外側のDIVでjQuery.find（ '。element'）を実行すると、2番目のコンテナー内のDIVも含め、すべてのDIVが取得されます。それは私が避けようとしていることです。

この場合の迅速でシンプルなjQueryセレクターソリューションはありますか？

jquerycssjquery-selectors
24
SquareCat

使いたいのは not セレクターだと思います。このような..

$(".container").not(".container .container")

または、 children セレクターを使用して、1つのレベルの深さから子を取得することもできます。これはネストされたdivを除外します。

もう少し明確にするために、「find」を使用した後、notセレクターを使用することをお勧めします。このような：

$(".container").find(".element").not($(".container .container .element"))

関数をnotに渡すことができるので、その関数で各要素の親が一致するかどうかを調べて、同じクラスの要素内にネストされているかどうかを確認できます。

http://jsfiddle.net/QXfs2/6/

removeIfNested = function(index) {
    // this is the corrent DOM element
    var $this = $(this),
        return_value = false;

    $.each($this.attr('class').split(/\s+/), function(index) {
        if ($this.parents("." + this).length > 0) {
            return_value = default_value || true;
        }
    });

    return return_value;
}


$(".container").find(".element").not(removeIfNested);

ネストされたコンテナにクラスを追加できれば、それは理想的ですが、それは次のとおりです。

$(".container").find(".element").not($(".nested .element"))

クラス「nested」を内部コンテナdivに追加したと仮定します。

32
CambridgeMike

あなたの特定の例では、これはうまくいくでしょう-

$("body > div.container > .element")

これは、最上位の要素divのみを取得します。要素コレクションが別の構造にある場合は、コレクションのコンテナIDをbodyに置き換えることができます。

デモ- http://jsfiddle.net/QAP37/

2
ipr101

以下は、選択した回答よりも少し簡潔で一般的であることがわかりました。これは、任意に深くネストされたツリーで機能します。

function getNonNestedElements(container, elementSelector, containerSelector) {
  return container.find(elementSelector).not(function(index) {
    var nearest = $(this).closest(containerSelector);
    return nearest[0] !== container[0];
  });
}

どこ：

  • containerは、ルート「コンテナ」divのjQueryオブジェクトです。
  • elementSelectorは要素のjQueryセレクターであり、この場合は.elementです。
  • containerSelectorはコンテナのjQueryセレクターであり、この場合は.containerです。

したがって、これは初期コンテナの下にあるすべての要素を検索し、各要素について、最も近いコンテナが初期コンテナであるか、他のネストされたコンテナであるかを確認します。最も近いコンテナがネストされたコンテナである場合、それは破棄されるため、別のコンテナ内にない子孫が残ります。

複数要素のネストされたフォームフィールドを繰り返す場合などに非常に便利です。

0
Richard J

次のようにjqueryセレクターを使用できます。

find('*:not(.container .container *)')
0
imCaps