Как настроить таргетинг на ближайший класс в контейнере с помощью jquery?

Question

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

.is-child класс покажет, если .parent клик по классу и будет показан только ближайший класс. Я уже пытался использовать .next() метод, но он покажет только 1 .is-child элемент за клик

Вот мой код:

    jQuery('li.current.parent').click(function(){
         jQuery(this).next('.is-child').css('display', 'block');
    });

Я также пытался использовать .nextAll но это покажет все .is-child элемент.

    jQuery('li.current.parent').click(function(){
         jQuery('.is-child').nextAll('.is-child').css('display', 'block');
    });

Answer 1

Вам нужно выбрать элементы, используя .nextUntil - это выберет все элементы из $(this) до указанного селектора (не включая $(this) И тот элемент, который соответствует селектору):

$(function() {
  jQuery('li.current.parent').click(function(){
    jQuery(this).nextUntil('.parent').css('background-color', 'red');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="current parent">click here</li>
  <li class="is-child">hi</li>
  <li class="is-child">hi</li>
  <li class="is-child">hi</li>
  <li class="parent">bye</li>
</ul>