2009-06-10 35 views
75

親のリンク要素をこのようなリストから選択するにはどうすればよいですか?<ul> CSS ul li a中のSO jqueryの第1レベルの要素のみを選択

<ul> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a> 
    <ul> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
</li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
ではなく ul li ul li a

おかげ

答えて

88
$("ul > li a") 

しかし、あなたが特異的に標的にしたい場合は、ルートULでクラスを設定する必要があります最も外側のul:

<ul class="rootlist"> 
... 

そして、それはです:

$("ul.rootlist > li a").... 

あなたが唯一のルートのli要素を持っていることを確認することのもう一つの方法:

$("ul > li a").not("ul li ul a") 

それは場しのぎに見えますが、あなたがしたら、それはトリックに

+0

うーんそれが含むjQueryオブジェクトの遭遇した最初のレベルのみを選択します私の問題はjquery 1.2を使っていることがわかった。私はそれを1.3に置き換え、セレクタのこれらの種類は現在正常に動作しています。あなたの返事と返事をいただいた皆さん、本当にありがとうございます。 – aston

+0

クラスを追加したくない場合は、明らかに$( "ul:first> li a")を実行します。これは明らかに内部レベルではなく、最初のレベルでのみ機能します。 – Alfonso

+0

$( "ul> li a")ではありません( "ul li ul a")。 – vicky

44

を行う必要があります最初のulは、children()メソッドを使用できます。これは、要素の直接の子のみを考慮します。 @activaが指摘するように、ルート要素を簡単に選択する一つの方法は、クラスまたはIDを与えることです。次の例では、IDがrootのルートulがあると仮定しています。

$('ul#root').children('li'); 
+1

ありがとう、それは私のために非常に役立ちます。 '$( 'ul')。first()。children( 'li')'も使用できます –

0

$("ul li:first-child")を使用して、ULの直接の子のみを取得することもできます。

私は同意しますが、メインULを識別するためのIDなどが必要です。それ以外の場合は、すべてを選択するだけです。あなたはULの周りのIDを持つdiv要素を持っていた場合は一番簡単な方法は、あなたがこれをしようとする場合があります.add_to_cart

+2

これは ':first-child'の使い方が間違っています。これは、すべての 'ul'の"最初の 'li'を選択します。最初の郵便は、最初の「ul」から「すべての李」を求めていた」 –

-1
.add_to_cart >>> .form-item:eq(1) 

ツリーレベルの子で二.FORMアイテムになります結果がまだ子供に流れている場合、多くの場合、JQueryは子供にも適用されます。この方法で使用する

$("ul.rootlist > li > a") 

: E> FはE.

は、明示的な子供たちを探すためにjQueryのを指示します要素の子であるあらゆるF要素と一致します。 http://www.w3.org/TR/CSS2/selector.html

+0

これは質問にも意味がありません – renke

3

から$("#someDiv > ul > li")

+0

これは実際に働く –

7

最も簡単な方法は、(IDまたはクラス名で)ルート要素を一意に識別し、直接子孫セレクタを使用する方法です。

$('ul.topMenu > li > a') 

はしかし、私は様々な深DOMの無名の要素上で動作するソリューションの検索でこの質問に出くわしました。

これは、各要素をチェックし、一致する要素のリストに親を持たないようにすることで実現できます。ここに私のsolutionがjQueryセレクタ「最上位」にラップされています。これを利用

jQuery.extend(jQuery.expr[':'], { 
    topmost: function (e, index, match, array) { 
    for (var i = 0; i < array.length; i++) { 
     if (array[i] !== false && $(e).parents().index(array[i]) >= 0) { 
     return false; 
     } 
    } 
    return true; 
    } 
}); 

、オリジナルのポストを解決するには、次のとおりです。here

$('ul:topmost > li > a') 

// Or, more simply: 
$('li:topmost > a') 

コンプリートjsFiddle利用できます。

+0

ここでうまくいきます! –

+0

新しいDOMメソッドを使うと、 ':topmost'のパフォーマンスを飛躍的に向上させることができます。' '.parentElement.closest(selector)'を使って試してみてください。いつものように、IE + Edgeはそれをサポートしない唯一のものです:>-(これはpolyfill http://pastebin.com/JNBk77Vmです – oriadam

0

これを試してみてください:

$("#myId > UL > LI") 
0

を私はので、私はこれを考え出した任意の深さの入れ子になったクラスといくつかの問題がありました。

var $elementsAll = $("#container").find(".fooClass");4 
 

 
var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll)); 
 

 
$levelOneElements.css({"color":"red"})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="fooClass" style="color:black"> 
 
Container 
 
    <div id="container"> 
 
    <div class="fooClass" style="color:black"> 
 
     Level One 
 
     <div> 
 
     <div class="fooClass" style="color:black"> 
 
      Level Two 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="fooClass" style="color:black"> 
 
     Level One 
 
     <div> 
 
     <div class="fooClass" style="color:black"> 
 
      Level Two 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

1

単にあなたが...

$("ul li a").click(function() { 
    $(this).parent().find(">ul")...Something; 
} 

例を参照してください、これを使用することができます:https://codepen.io/gmkhussain/pen/XzjgRE

関連する問題