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

Question

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

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

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

情况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，但不知道怎么做。 或者我应该创建一个包含所有日子的数组，然后在今天或其他地方拆分它？

Answer 1

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