Блог

Главная - Вопросы по программированию - Выбор первого в подмножестве

Выбор первого в подмножестве

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

У меня есть такой ДОМ, как этот;

 <li></li>
<li class="this"></li>
<li class="this"></li>
<li></li>
<li></li>
<li class="this"></li>
<li class="this"></li>
<li class="this"></li>
<li></li>
<li class="this"></li>
<li></li>
<li></li>

Я хотел бы выбрать только первый li в каждой серии последовательных this es.

Итак, если бы я, например, применил a .addClass("that") к объектам этого селектора, результирующий DOM выглядел бы так;

 <li></li>
<li class="this that"></li>
<li class="this"></li>
<li></li>
<li></li>
<li class="this that"></li>
<li class="this"></li>
<li class="this"></li>
<li></li>
<li class="this that"></li>
<li></li>
<li></li>

Каков был бы наиболее эффективный способ достижения такого эффекта? Я не могу добавлять или удалять какие-либо элементы в DOM (так, например, обертывание последовательных рядов в их собственных обертках невозможно).

Заранее большое спасибо!

Ответ №1:

Будет ли это работать?

 $("li:not(.this)   .this").addClass('that');

РЕДАКТИРОВАТЬ: если первый элемент относится к классу this , это не сработает, вам понадобится это (если оно применимо):

 $("li:not(.this)   .this, .this:first-of-type").addClass('that');

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

1. Я понятия не имею, как это работает, но, похоже, это действительно работает! Большое спасибо!

2. @EmphramStavanger: означает смежные элементы, выбирая тот, который справа 🙂 И всегда пожалуйста! (Мне очень нравится этот тип запросов. CSS3 великолепен.)

3. @EmphramStavanger: О, я только что заметил небольшую проблему. Смотрите мое редактирование.

4. О, хороший улов! Я даже не думал о том, что первым элементом будет a this , но это, конечно, возможно, потрясающе

Ответ №2:

 $('.this').each(function(){
    if($(this).prev().hasClass('this')==false){
        $(this).addClass('that');
    }
});

перебирайте все элементы с классом this , и если у его предыдущего собрата нет того же класса, добавьте that к нему

Метки: