在某个元素之后查找课程

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类。有关~选择器的更多信息，请参见What does the “~” (tilde/squiggle/twiddle) CSS selector mean?

$('.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

如果您想使用jQuery并已经拥有.today元素，则可以使用nextAll查找与选择器匹配的以下所有同级并将其限制为第一个{{1 }}使用.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。

Answer 3

您可以使用: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 4

如果您只想显示课程cal之后的前一个today，请使用以下选择器：

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

Answer 5

仅使用css就可以实现

通过使用.today ~ .cal，您将在.cal之后获得全部.today，但这将为您提供.cal之后的完整列表.today，以便排除所有{{ 1}}在.cal首次出现之后，您可以使用此.cal

，因此CSS选择器将为:not(.cal) + .cal

.today ~ :not(.cal) + .cal

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