英文:
Find class after a certain element even if they are not siblings
问题
我有一个具有相同类名 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">因为它在今天之前，所以不显示</li>
<li class="month"></li>
</ul>
<ul>
<li class="month"></li>
<li class="month today">今天</li>
<li class="month"></li>
</ul>
<ul>
<li class="month cal">因为它不是第一个CAL，所以不显示</li>
<li class="month cal">要显示，因为它是今天之后的第一个CAL</li>
<li class="month"></li>
</ul>
</div>
你可以使用以下代码来实现：
$('#eventCal .today').parent().nextAll().find('.cal:first').text();
英文:
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 the first element with the class cal, but only after the element today is found. The tricky part here is that the elements might not be siblings. If they were siblings, this would work:
$('#eventCal .today').nextAll('#eventCal .cal:first').text();
So for example, if I have the following list, how could I target the first cal after 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>
答案1
得分: 2
为了使这个代码在li不都是兄弟元素时也能正常工作，你可以获取.today元素在所有.month元素中的索引。然后，你可以获取所有在这之后的.month元素，并使用filter()检索第一个.cal元素，就像这样：
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">不显示，因为在今天之前</li>
<li class="month"></li>
</ul>
<ul>
<li class="month"></li>
<li class="month today">今天</li>
<li class="month"></li>
</ul>
<ul>
<li class="month cal">显示，因为是今天之后的第一个CAL</li>
<li class="month cal">不显示，因为不是第一个CAL</li>
<li class="month"></li>
</ul>
</div>
英文:
To make this work when the li are not all siblings you can get the index of the .today element within all .month elements. Then you can get all .month following that, and retrieve the first .cal using filter(), like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var todayIndex = $('.month.today').index();
var $cal = $(`.month:gt(${todayIndex})`).filter('.cal:first').addClass('foo');
<!-- language: lang-css -->
.foo { color: #C00; }
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
以下是翻译好的部分：
第一个替代方案是，通过以下方式通过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">因为它在今天之前，所以不显示</li>
<li class="month"></li>
</ul>
<ul>
<li class="month"></li>
<li class="month today">今天</li>
<li class="month"></li>
</ul>
<ul>
<li class="month cal">要显示，因为它是今天之后的第一个CAL</li>
<li class="month cal">因为不是第一个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">因为它在今天之前，所以不显示</li>
<li class="month"></li>
</ul>
<ul>
<li class="month"></li>
<li class="month today">今天</li>
<li class="month"></li>
</ul>
<ul>
<li class="month cal">要显示，因为它是今天之后的第一个CAL</li>
<li class="month cal">因为不是第一个CAL，所以不显示</li>
<li class="month"></li>
</ul>
</div>
英文:
An alternate solution is, find it by parent plus nextAll like below:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$('.month').each(function() {
if ($(this).hasClass('today')) {
$(this).parent().nextAll().find('.cal:first').addClass('active');
}
});
<!-- language: lang-css -->
.active {
background: red;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Or you can easily get it like this:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$('.today').parent().nextAll().find('.cal:first').addClass('active');
<!-- language: lang-css -->
.active {
background: red;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案3
得分: 0
$(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());
}
}
});
});
英文:
$(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())
}
}
});
});
答案4
得分: 0
我认为下一个解决方案非常简单。
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类的元素。
请注意，您可以在包含.today的ul之后放置任意多个不包含.cal的ul，这不会影响结果。
这里有一个在fiddle上的示例: https://jsfiddle.net/Samuel10F/utna63qx/
英文:
I think the next solution is quite simple.
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);
What we do is to check if .today has siblings with cal, if not, we search the first cal starting from the next ul.
Notice that you can put as many ul without cal as you want after the ul that contains today, it wont affect the result.
Here an example on fiddle: https://jsfiddle.net/Samuel10F/utna63qx/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论