Найти класс после определенного элемента, даже если они не братья и сестры

Question

У меня есть список элементов с тем же классом month. Некоторые из них также могут иметь класс cal, и только один элемент списка имеет класс today.

. Я бы хотел найти первый элемент с классом cal, но только после того, как элемент today найден. Сложность в том, что элементы не могут быть братьями и сестрами. Если бы они были братьями и сестрами, это сработало бы:

 $('#eventCal .today').nextAll('#eventCal .cal:first').text();

Так, например, если у меня есть следующий список, как я могу нацелиться на первый cal после today?

<div id="eventCal">
    <ul>
        <li class="month"></li>
        <li class="month cal">Not show because it's before TODAY</li>
        <li class="month"></li>
    </ul>
    <ul>
        <li class="month"></li>
        <li class="month today">Today</li>
        <li class="month"></li>
    </ul>
    <ul>
        <li class="month cal">To show as it's the first CAL after the TODAY</li>
        <li class="month cal">Not show because is not the first CAL</li>
        <li class="month"></li>
    </ul>
</div>

Answer 1

Чтобы это работало, когда li не все братья и сестры, вы можете получить индекс элемента .today во всех элементах .month. Затем вы можете получить все .month после этого и получить первые .cal, используя filter(), например:

var todayIndex = $('.month.today').index();
var $cal = $(`.month:gt(${todayIndex})`).filter('.cal:first').addClass('foo');

.foo { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="eventCal">
    <ul>
        <li class="month"></li>
        <li class="month cal">Not show because it's before TODAY</li>
        <li class="month"></li>
    </ul>
    <ul>
        <li class="month"></li>
        <li class="month today">Today</li>
        <li class="month"></li>
    </ul>
    <ul>
        <li class="month cal">To show as it's the first CAL after the TODAY</li>
        <li class="month cal">Not show because is not the first CAL</li>
        <li class="month"></li>
    </ul>
</div>

Answer 2

Я думаю, что следующее решение довольно простое.

var first_cal = ''
if($('.today').siblings('.cal').length){
    first_cal = $('.today').siblings('.cal').html()
}else{
    first_cal = $('.today').parent().nextAll('ul').find('.cal').html();
}

$('.result').text(first_cal);

Что мы делаем, это проверяем, есть ли у .today братья и сестры с cal, если нет, мы ищем первый cal, начиная со следующего ul.

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

Вот пример для fiddle : https://jsfiddle.net/Samuel10F/utna63qx/

Answer 3

    $(document).ready(function(){
      var foundToday = false;

  $('.month').each(function (idx,item) { 
         if( $(this).hasClass('cal') ){
            foundToday = true;
         }

         if(foundToday){
            if( $(this).hasClass('today') ){
                console.log($(this).text())
            }
         }

  });

});

Answer 4

Альтернативное решение: найдите его по parent плюс nextAll, как показано ниже:

$('.month').each(function() {
  if ($(this).hasClass('today')) {
    $(this).parent().nextAll().find('.cal:first').addClass('active');
  }
});

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="eventCal">
  <ul>
    <li class="month"></li>
    <li class="month cal">Not show because it's before TODAY</li>
    <li class="month"></li>
  </ul>
  <ul>
    <li class="month"></li>
    <li class="month today">Today</li>
    <li class="month"></li>
  </ul>
  <ul>
    <li class="month cal">To show as it's the first CAL after the TODAY</li>
    <li class="month cal">Not show because is not the first CAL</li>
    <li class="month"></li>
  </ul>
</div>

Или вы можете легко получить это так:

$('.today').parent().nextAll().find('.cal:first').addClass('active');

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="eventCal">
  <ul>
    <li class="month"></li>
    <li class="month cal">Not show because it's before TODAY</li>
    <li class="month"></li>
  </ul>
  <ul>
    <li class="month"></li>
    <li class="month today">Today</li>
    <li class="month"></li>
  </ul>
  <ul>
    <li class="month cal">To show as it's the first CAL after the TODAY</li>
    <li class="month cal">Not show because is not the first CAL</li>
    <li class="month"></li>
  </ul>
</div>