web-dev-qa-db-ja.com

jqueryで第1レベルの要素のみを選択する

このようなリストから親<ul>のみのリンク要素を選択するにはどうすればよいですか？

<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>

したがって、CSS ul li aではなく、ul li ul li aでは

ありがとう

jqueryhtmlcsscss-selectors
91
aston
$("ul > li a")

ただし、最も外側のulをターゲットにしたい場合は、ルートulにクラスを設定する必要があります。

<ul class="rootlist">
...

それは次のとおりです。

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

ルートli要素のみを持っていることを確認する別の方法：

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

見苦しいように見えますが、うまくいくはずです

105
Philippe Leybaert

最初のulを取得したら、 children（） メソッドを使用できます。このメソッドは、要素の直接の子のみを考慮します。 @activaが指摘しているように、ルート要素を簡単に選択する1つの方法は、クラスまたはIDを与えることです。以下は、ID rootを持つルートulがあることを前提としています。

$('ul#root').children('li');
54
tvanfosson

他の回答で述べたように、最も簡単な方法は、ルート要素を一意に識別し（IDまたはクラス名で）、直接の子孫セレクターを使用することです。

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

しかし、DOMの可変深さで名前のない要素で動作する解決策を探してこの質問に出会いました。

これは、各要素をチェックし、一致する要素のリストに親がないことを確認することで実現できます。これが私の solution で、jQueryセレクター「topmost」にラップされています。

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;
  }
});

これを利用して、元の投稿の解決策は次のとおりです。

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

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

完全なjsFiddleが利用可能 here 。

7
Courtney Christensen

単純にこれを使用できます。

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

例を参照してください： https://codepen.io/gmkhussain/pen/XzjgRE

3
GMK Hussain

結果がまだ子に流れている場合は、これを試してください。多くの場合、JQueryは子に適用されます。

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

この方法の使用：E> F要素Eの子であるF要素に一致します。

明示的な子のみを探すようにJQueryに指示します。 http://www.w3.org/TR/CSS2/selector.html

3
TitanKing

これを試して：

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

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

私は同意しますが、メインULを識別するにはIDまたは何か他のものが必要です。そうでなければ、すべてを選択します。 ULの周りにIDを持つdivがある場合、最も簡単なことは、$("#someDiv > ul > li")です。

0
CBarr

ネストされたクラスに深さの問題があるため、これを理解しました。含まれるJqueryオブジェクトの最初のレベルのみを選択します。

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>
0
Shawn Dotey

1

 $("ul.rootlist > target-element")
2   $("ul.rootlist").find(target-element).eq(0) (only one instance)
3   $("ul.rootlist").children(target-element)

おそらく他の多くの方法があります

0
Arlan T