Найти класс после определенного элемента

Question

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

Я бы хотел найти первый элемент с классом cal, но только после того, как элемент today найден

Так, например, если у меня есть следующий список:

<ul id="eventCal">
<li class="month"></li>
<li class="month cal">Not show because it's before TODAY</li>
<li class="month"></li>
<li class="month"></li>
<li class="month"></li>
<li class="month today">Today</li>
<li class="month"></li>
<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>

Answer 1

Вы можете использовать следующий селектор:

document.querySelector('.today ~ .cal') or $('.today ~ .cal').first();

Это захватит первый .cal класс после первого .today класса. Для получения дополнительной информации о селекторе ~ см. Что означает селектор «~» (тильда / загогулины / тиддл) CSS?

$('.today ~ .cal').first().css('color', 'red')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="eventCal">
  <li class="month"></li>
  <li class="month cal">Not show because it's before TODAY</li>
  <li class="month"></li>
  <li class="month"></li>
  <li class="month"></li>
  <li class="month today">Today</li>
  <li class="month"></li>
  <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>

Answer 2

Используя только css, вы можете достичь этого

Используя .today ~ .cal вы получите все .cal после .today, но это даст вам полный список .cal после .today, поэтому чтобы исключить все .cal после первого появления .cal, вы можете использовать этот :not(.cal) + .cal

, поэтому селектор css будет .today ~ :not(.cal) + .cal

.today ~ :not(.cal) + .cal
{
background:red;
}

<ul id="eventCal">
<li class="month">No</li>
<li class="month cal">Not show because it's before TODAY</li>
<li class="month">No</li>
<li class="month">No</li>
<li class="month">No</li>
<li class="month today">Today</li>
<li class="month">No</li>
<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 ">No</li>
</ul>

Answer 3

Если вы хотите показать только первый cal после класса today, используйте следующий селектор:

 $("#eventCal .month.cal").hide();
 $("#eventCal .today").nextAll(".month.cal:first").show();

Answer 4

Вы можете использовать :first, чтобы получить первый сегодняшний li, а затем использовать nextAll с :first, чтобы получить первый калибр после сегодняшнего дня

$(function(){
  var text = $('#eventCal li.today:first').nextAll('li.cal:first').text();
  console.log(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<ul id="eventCal">
<li class="month"></li>
<li class="month cal">Not show because it's before TODAY</li>
<li class="month"></li>
<li class="month"></li>
<li class="month"></li>
<li class="month today">Today</li>
<li class="month"></li>
<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>

Answer 5

Если вы хотите сделать это с jQuery, и у вас уже есть элемент .today, вы можете использовать nextAll, чтобы найти всех следующих братьев и сестер, которые соответствуют селектору, и ограничить его до сначала .cal с использованием :first:

let today = $('.today')
today.nextAll('.cal:first').css('color','red')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="eventCal">
<li class="month"></li>
<li class="month cal">Not show because it's before TODAY</li>
<li class="month"></li>
<li class="month"></li>
<li class="month"></li>
<li class="month today">Today</li>
<li class="month"></li>
<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>

Если вы хотите, чтобы все последующие братья и сестры соответствовали селектору .cal, вы можете удалить :first

Если вы У вас нет элемента today, и вас интересует только элемент cal, вы можете использовать $('.today ~ .cal').first().