当一组元素不总是在同一个父元素中时，如何找到下一个匹配的元素

How do you find the next matched element(s), when the set of elements are not always inside the same parent

本文关键字：元素 何找 下一个 同一个 一组      更新时间：2023-09-26

我正在修改一个日历插件。该插件将今天的类添加到今天的日期中。我想把"foo"类添加到"today"和之后的两天。

插件不是每个月都有一个无序列表，而是为每一行生成一个新的无序列表。

当合适的列表项交叉到不同的父元素中时，找到它们的最佳方法是什么？

案例1

<ul>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day today foo"></li>
    <li class="day foo"></li>
    <li class="day foo"></li>
    <li class="day"></li>
    <li class="day"></li>
</ul>

案例2

<ul>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day today foo"></li>
</ul>
<ul>
    <li class="day foo"></li>
    <li class="day foo"></li>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day"></li>
    <li class="day"></li>
</ul>

我一直在看.find、.nextAll、.nextUntil，但不确定如何完成。或者我应该创建一个包含所有天数的数组，然后在今天或其他时间将其拆分？

您可以找到所有的日子，然后通过index(element)找到jQuery集合中的"today"一个在哪里，然后使用slice来获得它和以下两个：

var days = $(".day")
var todayIndex = days.index($(".today"));
days.slice(todayIndex, todayIndex + 3).addClass("foo");

实例（第一种情况）:

var days = $(".day")
var todayIndex = days.index($(".today"));
days.slice(todayIndex, todayIndex + 3).addClass("foo");
.today {
  border: 1px solid #ddd;
}
.foo {
  color: blue;
}
<ul>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day today">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

实例（第二种情况）:

var days = $(".day")
var todayIndex = days.index($(".today"));
days.slice(todayIndex, todayIndex + 3).addClass("foo");
.today {
  border: 1px solid #ddd;
}
.foo {
  color: blue;
}
<ul>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day today">xxxx</li>
</ul>
<ul>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
    <li class="day">xxxx</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

相关文章：