jquery에서 첫 번째 수준 요소 만 선택

<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

감사

$("ul > li a")

그러나 특별히 가장 바깥 쪽 ul을 대상으로하려면 루트 ul에 클래스를 설정해야합니다.

<ul class="rootlist">
...

다음은 다음과 같습니다.

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

루트 li 요소 만 갖도록하는 또 다른 방법 :

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

칙칙해 보이지만 속임수를 써야합니다

초기 ul 이 있으면 해당 요소의 직계 자식 만 고려하는 children () 메서드를 사용할 수 있습니다 . @activa가 지적했듯이 루트 요소를 쉽게 선택하는 한 가지 방법은 클래스 또는 ID를 제공하는 것입니다. 다음은 id가있는 루트 ul이 있다고 가정합니다 root.

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

다른 답변에서 언급했듯이 가장 간단한 방법은 ID 또는 클래스 이름으로 루트 요소를 고유하게 식별하고 직계 하위 선택기를 사용하는 것입니다.

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

그러나 DOM의 다양한 깊이 에서 이름이 지정되지 않은 요소 에서 작동하는 솔루션을 찾기 위해이 질문을 발견했습니다 .

이는 각 요소를 확인하고 일치하는 요소 목록에 부모가 없는지 확인하여 수행 할 수 있습니다. 다음은 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;
  }
});

이를 활용하여 원본 게시물에 대한 솔루션은 다음과 같습니다.

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

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

여기에서 사용할 수있는 완전한 jsFiddle .

간단히 사용할 수 있습니다 ..

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

예를 참조하십시오 : https://codepen.io/gmkhussain/pen/XzjgRE

결과가 여전히 하위로 흘러가는 경우이를 시도해 볼 수 있으며, 많은 경우 JQuery가 여전히 하위에 적용됩니다.

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

이 방법 사용 : E> F 요소 E의 자식 인 모든 F 요소와 일치합니다.

JQuery에 명시 적 자식 만 찾도록 지시합니다. http://www.w3.org/TR/CSS2/selector.html

$("ul li:first-child")UL의 직계 하위 항목 만 가져 오는 데 사용할 수도 있습니다 .

동의합니다. 주 UL을 식별하려면 ID 또는 다른 것이 필요합니다. 그렇지 않으면 모두 선택됩니다. UL 주위에 ID가있는 div가있는 경우 가장 쉬운 방법은$("#someDiv > ul > li")

이 시도:

$("#myId > UL > LI")

어떤 깊이에서든 중첩 된 클래스에 문제가있어서 이것을 알아 냈습니다. 포함하는 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>

1

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

아마도 다른 많은 방법이 있습니다

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

.add_to_cart의 트리 수준 자식에있는 두 번째 .form-item