javascript - 当元素集并不总是在同一个父元素中时，如何找到下一个匹配元素

Question

我正在修改一个日历插件。该插件将今天的类添加到今天的日期。我想将“foo”类添加到“今天”和接下来的 2 天。

插件不是每个月都是 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>

案例二

<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，但不确定如何去做。或者我应该创建一个包含所有日期的数组，然后在今天之类的时间拆分它吗？

Answer 1

您可以找到所有的日子，然后通过 index(element) 找出 jQuery 设置“今天”的位置。 , 然后使用 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>