Find Class After A Certain Element

I have a list of elements with the same class month. Some of them might have the class cal as well, and only one element of the list has the class today. I'd like to search for th

Solution 1:

You can use the following selector:

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

This will grab the first .cal class after the first .today class. For more information about the ~ selector, see What does the “~” (tilde/squiggle/twiddle) CSS selector mean?

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

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

Solution 2:

You can make use of :first to get the first today li and then use nextAll with :first to get first cal after today

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

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

Solution 3:

If you want to do that with jQuery and you already have the .today element, you can use nextAll to find the all following siblings that match the selector and limit it to the first .cal using :first:

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

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

If you want to have all following sibling that match the selector .cal, then you can remove the :first

If you don't have the today element and you are only interested in the the cal element, you can use $('.today ~ .cal').first().

Solution 4:

If you want to show only the first cal after class today then use the following selector:

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

Solution 5:

Using only css you can achieve it

By using .today ~ .cal you get all .cal after .today, but this will give you the full list .cal after .today so to exclude all .cal after the first appearance of .cal you can use this :not(.cal) + .cal

so the css selector will be .today ~ :not(.cal) + .cal

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

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