Объедините селектор классов с nth-child() или eq()

Question

У меня есть список, и я хочу получить первый элемент после каждого заголовка. Мне нужно сделать это все в одной строке, так как im использует Nightwatch, который не обладает всей эластичностью использования jquery в браузере. Что у меня есть:

// This works 
console.log('first item after first header is '); 
console.log($('#ul-wrapper li.heading ~ li:first').text()); 

// This doesnt 
console.log('first item after second header is '); 
console.log($('#ul-wrapper li.heading:nth-child(2) ~ li:first').text()); 

Поэтому в основном я должен объединить селектор класса с п-й ребенок() или эк(). Html является:

<ul id="ul-wrapper"> 
    <li class="heading"> 

     Heading 1 

    </li> 
    <li> 
     <label> 
     <a> 
     Item 1 
     </a> 
     </label> 
    </li> 
    <li> 
     <label> 
     <a> 
     Item 2 
     </a> 
     </label> 
    </li> 
    <li class="heading"> 

     Heading 2 

    </li> 
    <li> 
     <label> 
     <a> 
     Item 3 
     </a> 
     </label> 
    </li> 
    <li> 
     <label> 
     <a> 
     Item 4 
     </a> 
     </label> 
    </li> 
</ul> 

скрипку является here

Answer 1

Класс псевдонимов :nth-child() относится только к индексу элемента относительно родительского элемента. Аналогично, :nth-of-type() будет смотреть только на индекс элемента на основе типа. Ни псевдоэлементы :nth-child()/:nth-of-type() не рассмотрят атрибут элемента class.

С этим сказанным, метод :eq() будет выбрать элемент по его индексу на основе отфильтрованный набор (который является именно то, что вы хотите в этом случае). Однако стоит отметить, что :eq() имеет индекс, основанный на нуле (в отличие от :nth-child()/:nth-of-type()). В этом случае вам нужно будет использовать eq(1) для доступа ко второму li элемент:

Example Here

$('#ul-wrapper li.heading:eq(1) ~ li:first'); 

---

Вы можете также использовать соседний родственный комбинатор, +:

Example Here

$('#ul-wrapper li.heading:eq(1) + li'); 

Answer 2

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

Если я понимаю правильно, вы можете использовать Adjacent sibling selectors

$('#ul-wrapper li.heading + li').css("background", "red");

.heading { 
 
    background-color: lightgreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="ul-wrapper" style=""> 
 
    <li class="heading"> 
 

 
    Heading 1 
 

 
    </li> 
 
    <li> 
 
    <label> 
 
     <a> 
 
     \t Item 1 
 
     </a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <a> 
 
     \t Item 2 
 
     </a> 
 
    </label> 
 
    </li> 
 
    <li class="heading"> 
 

 
    Heading 2 
 

 
    </li> 
 
    <li> 
 
    <label> 
 
     <a> 
 
     \t Item 3 
 
     </a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <a> 
 
     \t Item 4 
 
     </a> 
 
    </label> 
 
    </li> 
 
</ul>