Chỉ chọn các phần tử cấp một trong jquery

Làm cách nào tôi có thể chọn các phần tử liên kết của chỉ phần tử gốc <ul>từ một danh sách như thế này?

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

Vì vậy, trong css ul li a, nhưng khôngul li ul li a

Cảm ơn

$("ul > li a")

Nhưng bạn sẽ cần phải thiết lập một lớp trên ul gốc nếu bạn muốn nhắm mục tiêu đặc biệt đến ul:

<ul class="rootlist">
...

Sau đó nó là:

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

Một cách khác để đảm bảo rằng bạn chỉ có các phần tử gốc li:

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

Nó trông có vẻ kludgy, nhưng nó sẽ thực hiện thủ thuật

Khi bạn có ul ban đầu, bạn có thể sử dụng phương thức children () , phương thức này sẽ chỉ xem xét các phần tử con trực tiếp của phần tử. Như @activa đã chỉ ra, một cách để dễ dàng chọn phần tử gốc là cung cấp cho nó một lớp hoặc một id. Điều sau giả sử bạn có một ul gốc với id root.

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

Như đã nêu trong các câu trả lời khác, phương pháp đơn giản nhất là xác định duy nhất phần tử gốc (theo ID hoặc tên lớp) và sử dụng bộ chọn con cháu trực tiếp.

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

Tuy nhiên, tôi đã gặp câu hỏi này để tìm kiếm một giải pháp có thể hoạt động trên các phần tử không tên ở các độ sâu khác nhau của DOM.

Điều này có thể đạt được bằng cách kiểm tra từng phần tử và đảm bảo phần tử đó không có phần tử gốc trong danh sách các phần tử đã so khớp. Đây là giải pháp của tôi , được bao bọc trong bộ chọn jQuery 'trên cùng'.

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

Sử dụng điều này, giải pháp cho bài đăng gốc là:

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

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

Hoàn thành jsFiddle có sẵn tại đây .

Đơn giản là bạn có thể sử dụng cái này ..

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

Xem ví dụ: https://codepen.io/gmkhussain/pen/XzjgRE

Bạn có thể muốn thử điều này nếu kết quả vẫn chuyển xuống trẻ em, trong nhiều trường hợp, JQuery sẽ vẫn áp dụng cho trẻ em.

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

Sử dụng phương pháp này: E> F So khớp bất kỳ phần tử F nào là con của phần tử E.

Yêu cầu JQuery chỉ tìm kiếm trẻ em rõ ràng. http://www.w3.org/TR/CSS2/selector.html

Bạn cũng có thể dùng $("ul li:first-child") để chỉ lấy các phần tử con trực tiếp của UL.

Tôi đồng ý, mặc dù vậy, bạn cần một ID hoặc thứ gì đó khác để xác định UL chính nếu không nó sẽ chỉ chọn tất cả chúng. Nếu bạn có một div có ID xung quanh UL, điều dễ dàng nhất để làm là$("#someDiv > ul > li")

Thử cái này:

$("#myId > UL > LI")

Tôi đã gặp một số rắc rối với các lớp lồng nhau từ bất kỳ độ sâu nào nên tôi đã tìm ra điều này. Nó sẽ chỉ chọn cấp độ đầu tiên mà nó gặp phải của một Đối tượng Jquery có chứa:

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)

có lẽ có nhiều cách khác

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

.form-item thứ hai ở cấp độ cây con từ .add_to_cart