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

Question

Làm cách nào để chọn các phần tử liên kết của chỉ cha mẹ <ul> 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ông ul li ul li a

Cảm ơn

Answer 1

$("ul > li a") 

Nhưng bạn sẽ cần phải thiết lập một lớp học trên ul gốc nếu bạn đặc biệt muốn nhắm đến ngoài cùng 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ó những yếu tố li root:

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

Có vẻ kludgy, nhưng nó phải làm các trick

Answer 2

Một khi bạn có các ul ban đầu, bạn có thể sử dụng phương pháp children(), mà sẽ chỉ xem xét các con ngay lập tức của các yếu 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. Sau đây giả sử bạn có một ul gốc với id root.

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

Answer 3

Bạn cũng có thể sử dụng $("ul li:first-child") để chỉ nhận con trực tiếp của UL.

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

Answer 4

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

thứ hai .form mục ở cấp cây con từ .add_to_cart

Answer 5

Bạn có thể muốn thử loại này nếu kết quả vẫn chảy 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 Trận bất kỳ yếu tố F đó là một đứa trẻ của một nguyên tố E.

Cho JQuery để tìm chỉ dành cho trẻ em rõ ràng. http://www.w3.org/TR/CSS2/selector.html

Answer 6

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 đã xem qua câu hỏi này để tìm kiếm một giải pháp mà sẽ làm việc trên yếu tố giấu tên tại độ 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 không có phụ huynh trong danh sách các phần tử phù hợp.Đây là solution của tôi, được bọc trong một 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; 
    } 
}); 

Bằng cách sử dụng này, giải pháp cho các bài bản gốc là:

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

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

Hoàn jsFiddle sẵn here.

Answer 7

Hãy thử điều này:

$("#myId > UL > LI") 

Answer 8

tôi đã có một số rắc rối với các lớp lồng nhau từ bất kỳ độ sâu vì vậy tôi figured this out. Nó sẽ chỉ chọn cấp độ đầu tiên nó gặp một chứa 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>

Answer 9

Đơn giản chỉ cần bạn có thể sử dụng này ..

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

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