Как выбрать элемент, в котором нет ссылки?

Question

Учитывая этот HTML:

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

Я хочу, чтобы впрыснуть class="current" в одной позиции, которая не имеет ссылку внутри него.

Как использовать jQuery для поиска элемента, который НЕ содержит ребенка?

Answer 1

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

Answer 2

Я хотел бы предложить, что вы просто добавить <span> элемент внутри вашего <li>, чтобы отличить его от элементов, которые имеют ссылки на них.

<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

Выберите <li> элемент, который не имеет <a> ребенка с помощью :has и :not селектор:

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

jsFiddle

- EDIT -

Хотя это может быть кратчайшее решение, его читаемость в стороне, он определенно не самый лучший в отношении скорости.

С учетом этого, я предлагаю вам проверить отличный answer от @bazmegakapa.

Поскольку это то, что вы (или кто-либо другой, включая меня), может в конечном итоге, используя более чем один раз, я расширил JQuery немного с этим плагином/метод можно использовать для того, чтобы DRY код:

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

что вы можете позвонить с:

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

Это расширение по умолчанию (если второй аргумент метода не передается), проверьте, есть ли какие-либо прямые потомки (children), что матч при условии селектора. Тем не менее, вы можете предоставить любой tree-traversal parameter в качестве второго аргумента метода. Таким образом, это может быть записано как одно из следующих действий:

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

Я обновил jsFiddle, чтобы отразить это.

Answer 4

Вы должны использовать метод .not() (который в основном отрицается .filter()) с функцией фильтра.

$('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

---

Можно также использовать сложные селекторы, как и @Krule suggested, но я считаю его менее читаемым и даже jQuery manual on :not() предостерегает против него:

The .not() метод предоставит вам более читаемые варианты , чем нажатие сложных селекторов или переменных в: not() sele ctor фильтр. В большинстве случаев это лучший выбор.

Кроме того, :has() на самом деле не рекомендуется, а также:

Потому что: есть() является расширением JQuery и не является частью спецификации CSS , запросы с использованием: есть() не может воспользоваться повышение производительности , обеспечиваемое встроенным методом DOM querySelectorAll() . Для лучшей производительности в современных браузерах используйте $ («ваш-чистый-css-селектор»). Вместо этого (селектор/DOMElement).