cách chọn phần tử KHÔNG có liên kết bên trong?

Question

Với HTML này:

<ul> 
    <li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li> 
    <li><a href="/artists/gil_elvgren/likes">Likes</a></li> 
    <li>Favorites</li> 
    <li><a href="/artists/gil_elvgren/follows">Follows</a></li> 
    <li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li> 

</ul> 

tôi muốn tiêm class="current" vào chi tiết đơn hàng mà không có một liên kết bên trong nó.

Làm cách nào để sử dụng jQuery để tìm phần tử KHÔNG chứa con?

Answer 1

$("li").each(function(){ 
    if($(this).children().length == 0){ 
     //found current.. 
     $(this).addClass("current"); 
    } 
}); 

Answer 2

tôi sẽ đề nghị rằng bạn chỉ cần thêm một yếu tố <span> bên trong <li> của bạn để phân biệt nó giữa các yếu tố có liên kết trong đó.

<ul> 
    <li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li> 
    <li><a href="/artists/gil_elvgren/likes">Likes</a></li> 
    <li><span>Favorites</span></li> 
    <li><a href="/artists/gil_elvgren/follows">Follows</a></li> 
    <li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li> 
</ul> 

CSS:

ul li a { /* Link CSS */ } 
ul li span { /* Current CSS */ } 

Answer 3

Chọn <li> yếu tố mà không có <a> con bằng cách sử dụng :has và :not selector:

$("li:not(:has(a))").addClass("current"); 

jsFiddle

- EDIT -

Trong khi điều này có thể là giải pháp ngắn nhất, dễ đọc sang một bên, nó chắc chắn không phải là giải pháp tốt nhất liên quan đến tốc độ.

Với ý nghĩ đó, tôi khuyên bạn nên kiểm tra một số lớn answer được cung cấp bởi @bazmegakapa.

Do đây là một cái gì đó bạn (hoặc bất cứ ai khác trong đó có tôi) có thể kết thúc sử dụng nhiều hơn một lần, tôi đã mở rộng jQuery một chút với plugin này/phương pháp mà bạn có thể sử dụng để DRY mã của bạn:

jQuery.fn.thatHasNo = function(element, method) { 
    if (typeof method === "undefined" || method === null) method = "children"; 
    return this.not(function() { 
    return $(this)[method](element).length; 
    }); 
}; 

nào bạn có thể gọi với:

$("li").thatHasNo("a").addClass("current"); 

Phần mở rộng này sẽ, theo mặc định (nếu đối số thứ hai phương pháp là không được thông qua), kiểm tra xem có bất kỳ hậu duệ trực tiếp (children) mà trận đấu cung cấp selector. Tuy nhiên, bạn có thể cung cấp bất kỳ đối số tree-traversal parameter nào làm phương thức thứ hai cho phương thức. Vì vậy, điều này có thể được viết bằng một trong các cách sau:

$("li").thatHasNo("a", "children").addClass("current"); 
//... 
$("li").thatHasNo("a", "find").addClass("current"); 
//... 
$("li").thatHasNo(".class", "siblings").addClass("lame"); 

Tôi đã cập nhật jsFiddle để phản ánh điều đó.

Answer 4

Bạn nên sử dụng phương pháp .not() (về cơ bản bị phủ nhận .filter()) với chức năng lọc.

$('li') /* select the elements you want to test */ 
    .not(function() { /* run a filter function on them */ 
     /* those that have a direct children link (use find() if you need 
     any kind of children) will return true thus excluded */ 
     return $(this).children('a').length; 
    }) 
    .addClass('current'); /* add our beloved class */ 

jsFiddle Demo

---

Bạn cũng có thể sử dụng bộ chọn phức tạp, như @Krule suggested, nhưng tôi thấy nó ít có thể đọc và thậm chí cả jQuery manual on :not() cảnh báo chống lại nó:

Các .not() phương pháp sẽ kết thúc cung cấp cho bạn nhiều lựa chọn hơn có thể đọc được so với việc chọn bộ chọn hoặc biến phức tạp thành: không() sele bộ lọc ctor. Trong hầu hết các trường hợp, nó là một lựa chọn tốt hơn.

Ngoài ra, :has() là không thực sự khuyến khích cũng như:

Bởi vì: có() là một phần mở rộng jQuery và không một phần của đặc tả CSS , truy vấn sử dụng: có() không thể tận dụng lợi thế của mức tăng hiệu suất được cung cấp bởi phương thức truy vấn DOM gốcSelectorAll() . Để có hiệu suất tốt hơn trong các trình duyệt hiện đại, hãy sử dụng $ ("your-pure-css-selector") thay thế (selector/DOMElement).