英文:
Find class after a certain element
问题
我有一个具有相同类名 month 的元素列表。其中一些可能还具有类名 cal，而列表中只有一个元素具有类名 today。
我想要查找具有类名 cal 的第一个元素，但只有在找到元素 today 之后才能查找。
例如，如果我有以下列表：
<ul id="eventCal">
<li class="month"></li>
<li class="month cal">因为在今天之前，所以不显示</li>
<li class="month"></li>
<li class="month"></li>
<li class="month"></li>
<li class="month today">今天</li>
<li class="month"></li>
<li class="month cal">显示，因为它是今天之后的第一个 CAL</li>
<li class="month cal">因为不是第一个 CAL，所以不显示</li>
<li class="month"></li>
</ul>
英文:
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
So for example, if I have the following list:
<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>
答案1
得分: 5
你可以使用以下选择器：
document.querySelector('.today ~ .cal') 或 $('.today ~ .cal').first();
这将选取第一个.today类之后的第一个.cal类。有关~选择器的更多信息，请参阅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">因为在今天之前，所以不显示</li>
<li class="month"></li>
<li class="month"></li>
<li class="month"></li>
<li class="month today">今天</li>
<li class="month"></li>
<li class="month cal">因为是今天之后的第一个CAL，所以显示</li>
<li class="month cal">因为不是第一个CAL，所以不显示</li>
<li class="month"></li>
</ul>
英文:
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?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.today ~ .cal').first().css('color', 'red')
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
如果您想要使用jQuery并已经有.today元素，您可以使用nextAll来查找与选择器匹配的所有后续兄弟元素，并将其限制为第一个.cal，使用:first：
let today = $('.today')
today.nextAll('.cal:first').css('color', 'red')
如果您想要获取所有后续匹配选择器.cal的兄弟元素，然后可以删除:first。
如果您没有today元素，只关心cal元素，您可以使用$('.today ~ .cal').first()。
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let today = $('.today')
today.nextAll('.cal:first').css('color','red')
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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().
答案3
得分: 0
你可以使用 :first 来获取今天的第一个li，然后使用 nextAll 与 :first 来获取今天之后的第一个cal。
$(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">因为在今天之前所以不显示</li>
<li class="month"></li>
<li class="month"></li>
<li class="month"></li>
<li class="month today">今天</li>
<li class="month"></li>
<li class="month cal">要显示，因为它是今天之后的第一个CAL</li>
<li class="month cal">不显示，因为不是第一个CAL</li>
<li class="month"></li>
</ul>
英文:
You can make use of :first to get the first today li and then use nextAll with :first to get first cal after today
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function(){
var text = $('#eventCal li.today:first').nextAll('li.cal:first').text();
console.log(text);
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案4
得分: 0
如果您只想在类名为"today"的元素后面显示第一个"cal"，则可以使用以下选择器：
$("#eventCal .month.cal").hide();
$("#eventCal .today").nextAll(".month.cal:first").show();
英文:
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();
答案5
得分: 0
.today ~ :not(.cal) + .cal {
background: red;
}
英文:
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.today ~ :not(.cal) + .cal
{
background:red;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论