jQuery：xを含む最高レベルの要素

Question

特定の要素を含む要素を選択し、その結果をフィルタリングして最高レベルのみを取得する方法を探しています。説明するのは難しいが例を簡単にする：

<div id="one"> 
    <div id="two"> 
     <div id="three" class="find-me"></div> 
    </div> 
</div> 
<div id="four"> 
    <div id="five" class="find-me"></div> 
</div> 

この場合、私のセットには#oneと#fourが含まれていて欲しい。私が次のようなことをしようとすれば、

var elements = $('div').has('.find-me'); 

私は要素#one、#two、＃4を得る。

注： '最高レベル'は、この場合は$('div')の最初のセレクタの最上位の要素に関連します。

Answer 1

highest levelが何であるかの定義を、なぜなら実際には少しあいまいです！それは役に立たない。

問題をより具体的に定義することで、このhighest-definitionの明確な定義が得られます。たとえば、the farthest div parentなどとなります。要素の親をトラバースするには、.parents()と.closest()のメソッドを使用できます。

var farthestDiv = $(".find-me").parents("div").last(); 

は明らかにあなたがfind-meの複数回出てくる持っている場合は、.each()ループでこれを実行する必要があります。

がここで例を参照してください。http://jsfiddle.net/GsQDb/3/

Answer 2

あなたは一つの大きなコンテナのdivでそれらすべてを置く場合は、使用することができます：

$('.container div.find-me').parents($('.container').children()); 

私は今それをテストする機会を持っていませんが、動作しなければならないことは。

もっと複雑な解決策があるので私に知らせてください。

Answer 3

フィルタを使用して、最初のセレクタの後に必要なものと一致しない要素を除外します。例：

var elements = $('div.find-me').filter(function(idx){ 
    return !$(this).parents('div.find-me').length; 
}); 

Answer 4

クラスを一番上のdivに割り当てることはできますか？もしそうなら、あなたがこのような何かを行うことができます。最高レベルの親がhtmlタグになり、ページ内の任意.find-meがある場合はまあ

​​

Answer 5

これは、あなたがやりたいだろう、それは最初の要素を検索し、それらの最高の要素を検索し、見つかった最大の要素のjQueryオブジェクトを作成します。

var elements = $('div.find-me'), highest = []; 

elements.each(function(){ 
var parent = this, body = document.body; 

    while(parent && parent.parentNode !== body) { 
    parent = parent.parentNode; 
    } 

    if($.inArray(parent, highest) < 0) { 
    highest.push(parent); 
    } 
}); 

highest = jQuery(highest); 

jsfiddle：

http://jsfiddle.net/D3jC8/2/

Answer 6

は、あなたはこの1つのライナーを使用することができ、あなたはbodyタグの直系の子孫を意味し、 "トップレベル" でと仮定。 .find-meクラスを持つすべてのオブジェクトを見つけ、bodyタグの子孫であるタグを親から検索します（トップレベルになります）。あなたは、それはここで働いて見ることができます

$(".find-me").parents("body > *") 

：http://jsfiddle.net/jfriend00/9LF6u/

は、これは、これらの利点があります。

1. タグの任意のタイプは、それがトップレベルのタグ（だけでなく、DIV）
2. することができオブジェクト（ほとんどのブラウザでは内部的には高速で、getElementsByClassNameを経由します）を見つけて親階層を歩いているので、より高速な方法の1つでなければなりません。
3. 重複を自動的に処理するので、指定された最上位レベルのアイテムは複数回リストされることはありません。
4. トップレベルの定義をコンテナオブジェクトなどに変更したい場合は、.parents(selector)メソッドに渡されたセレクタを変更してその変更を反映させることができます。

Answer 7

$(".find-me").map(function() { 
    return $(this).parents("div").last().get(); 
});