Câu hỏi Chỉ chọn các phần tử cấp đầu tiên 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ỉ cha mẹ <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ông ul li ul li a

Cảm ơn


76
2018-06-10 20:11


gốc




Các câu trả lời:


$("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 đặc biệt muốn nhắm mục tiêu ul ngoài cùng:

<ul class="rootlist">
...

Sau đó nó là:

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

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

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

Nó trông kludgy, nhưng nó nên làm các trick


91
2018-06-10 20:14



Hmm Tôi phát hiện ra vấn đề của tôi là sử dụng jquery 1.2. Tôi đã thay thế nó bằng 1,3 và các loại bộ chọn này hiện đang hoạt động tốt. Cảm ơn rất nhiều vì câu trả lời của bạn và mọi người đã trả lời. - aston
Trong trường hợp bạn không muốn thêm một lớp chỉ cần làm $ ("ul: first> li a") rõ ràng điều này sẽ chỉ làm việc cho cấp độ đầu tiên, không phải là cấp độ bên trong. - Alfonso
$ ("ul> li a"). không ("ul li ul a") hoạt động tốt. - vicky


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

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

45
2018-06-10 20:21



Cảm ơn, Nó rất hữu ích cho tôi. An $('ul').first().children('li') cũng có thể được sử dụng - Ivan Black


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 giải pháp có thể hoạt động các phần tử chưa được đặt 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 nó không có một phụ huynh trong danh sách các phần tử phù hợp. Đây là dung dịch, được bao 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 đ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 đây.


7
2018-01-11 14:28



Hoạt động rất tốt ở đây!
Bằng cách sử dụng các phương thức DOM mới, bạn có thể cải thiện đáng kể hiệu suất của :topmost - thử sử dụng .parentElement.closest(selector). Như mọi khi, IE + Edge là những người duy nhất không hỗ trợ nó: :-( vì vậy đây là một polyfill pastebin.com/JNBk77Vm - oriadam


Bạn có thể muốn thử điều 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 So khớp bất kỳ phần tử F nào là phần tử con của phần tử E.

Yêu cầu JQuery chỉ xem xét cho trẻ em rõ ràng. http://www.w3.org/TR/CSS2/selector.html


3
2018-06-10 09:01



cái này thực sự hoạt động - Roberto Alarcon


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


2
2017-11-07 10:01





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

Tôi đồng ý mặc dù, bạn cần một ID hoặc cái gì khác để xác định chính UL 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 xung quanh UL, điều dễ nhất sẽ làm$("#someDiv > ul > li")


0
2018-06-10 21:48



Đây là cách sử dụng sai :first-child. Điều này sẽ chọn "đầu tiên li của mọi ul"Bài đăng gốc đã yêu cầu" mọi litừ đầu tiên ul. " - Courtney Christensen


Thử cái này:

$("#myId > UL > LI")

0
2017-10-28 16:43