Блог

Главная - Вопросы по программированию - jQuery Как выбрать все элементы li в ul, у которых НЕТ определенного КЛАССА

jQuery Как выбрать все элементы li в ul, у которых НЕТ определенного КЛАССА

#jquery #list

#jquery #Список

Вопрос:

Вот образец html, который у меня есть. 

 <ul id="alist">
<li class="red">...</li>
<li class="blue">...</li>
<li class="red">...</li>
<li class="green">...</li>
</ul>

Цель: выбрать все элементы в списке, у которых нет класса ‘red’, и удалить их.

Это то, что у меня есть на данный момент. Я знаю, что это близко, но либо в коде, либо где-то в селекторе ошибка. 

 $('#alist :not(:has(.red))').fadeOut('slow');

Я также пытался 

 $('#alist li :not(:has(.red))').fadeOut('slow');

$('#alist :not(:has(li.red))').fadeOut('slow');

Ни один из них не работает (очевидно). Но когда я попытался отфильтровать что-то внутри ul, это происходит. Итак, с html как: 

 <li><a class="red">...</li>
.
.
.
<li><a class="green">...</li>

и создал селектор jquery

 $('#alist li :not(:has(a.red))').fadeOut('slow');

это работает.

Так почему jQuery не позволяет мне фильтровать классы li?

Ответ №1:

Попробуйте это:

 $('#alist li a').not('.red').parent().fadeOut('slow');

При этом выбираются все теги привязки, которые теперь имеют red в качестве класса, и родительский элемент исчезает li

Комментарии:

1. Также проверьте :not() селектор — медленнее в IE, быстрее в браузерах с поддержкой CSS3 ( смотрите результаты )

2. @Neal: он хочет соответствовать первой версии html (поэтому нет a и .parent() )

3. @Dan я не совсем уверен в этом. а также не предполагайте, что OP является he

4. @Neal: цитирую OP: «Цель: выбрать все элементы в списке, у которых нет класса ‘red’, и удалить их «. , «почему jQuery не позволяет мне фильтровать классы li?» . Что касается критики моего использования he , я не думаю, что в этом неофициальном сценарии это имеет какое-либо значение, тем более что имя пользователя не указывает на пол. Я не думаю, что он / она был бы оскорблен, я бы не

5. @Dan я хотел поставить :-P в конце моего последнего комментария, думаю, я забыл это. хммм, я не знаю, чего бы ни хотел OP, OP уже выбрал, и это здесь для будущих пользователей

Ответ №2:

:has просматривает дочерние элементы элементов. Вам просто нужно посмотреть на сам класс элемента. Итак:

 $('#alist :not(.red)').fadeOut('slow');