Selecting only first-level elements in jquery

Selecting only first-level elements in 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

Thanks

$("ul > li a")

But you would need to set a class on the root ul if you specifically want to target the outermost ul:

<ul class="rootlist">
...

Then it's:

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

Another way of making sure you only have the root li elements:

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

It looks kludgy, but it should do the trick

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

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

As stated in other answers, the simplest method is to uniquely identify the root element (by ID or class name) and use the direct descendent selector.

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

However, I came across this question in search of a solution which would work on unnamed elements at varying depths of the DOM.

This can be achieved by checking each element, and ensuring it does not have a parent in the list of matched elements. Here is my solution, wrapped in a jQuery selector '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;
  }
});

Utilizing this, the solution to the original post is:

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

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

Complete jsFiddle available here.

Simply you can use this..

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

See example : https://codepen.io/gmkhussain/pen/XzjgRE

You might want to try this if results still flows down to children, in many cases JQuery will still apply to children.

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

Using this method: E > F Matches any F element that is a child of an element E.

Tells JQuery to look only for explicit children. http://www.w3.org/TR/CSS2/selector.html

사용할 수도 있습니다.$("ul li:first-child")UL의 직계 자녀들만 얻을 수 있습니다.

동의합니다만, 메인 UL을 식별하려면 ID나 다른 것이 필요합니다. 그렇지 않으면 모두 선택할 것입니다.UL 주변에 신분증을 가진 디바가 있다면 가장 쉬운 일은$("#someDiv > ul > li")

Try this:

$("#myId > UL > LI")

I had some trouble with nested classes from any depth so I figured this out. It will select only the first level it encounters of a containing Jquery Object:

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)

there are probably many other ways

사용하다.querySelectorAll()하위 셀렉터()와 함께)>및 ):scope성:topParentElementUl.querySelectorAll(':scope > li > a')

jQuery와 함께 작동하기 위해 일부 부분만 수정하면 됩니다.

참조 : https://gomakethings.com/how-to-convert-the-jquery-children-method-to-vanilla-js/

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

.add_to_cart에서 트리 수준의 두 번째 .form-item 하위 항목

언급URL : https://stackoverflow.com/questions/977883/selecting-only-first-level-elements-in-jquery