即使它們不是兄弟姐妹，也可以在某個元素之后查找類

Question

我有一個具有相同類month的元素列表。 其中一些可能也有類cal ，並且列表中只有一個元素有類today 。

我想搜索類cal的第一個元素，但只能在找到today的元素之后。 這里棘手的部分是元素可能不是兄弟元素。 如果他們是兄弟姐妹，這將起作用：

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

例如，如果我有以下列表，我如何定位today之后的第一個cal ？

<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不是所有兄弟姐妹時完成這項工作，您可以在所有.month元素中獲取.today元素的索引。 然后你就可以得到所有.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

另一種解決方案是，通過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>

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

我認為下一個解決方案非常簡單。

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 的兄弟姐妹，如果沒有，我們從下一個 ul 開始搜索第一個 cal。

請注意，您可以在包含今天的 ul 之后放置任意數量的不帶 cal 的 ul，它不會影響結果。

這里有一個關於小提琴的例子： https : //jsfiddle.net/Samuel10F/utna63qx/