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

Question

I am modifying a calendar plugin. The plugin adds a class of today to todays date. I would like to add the class of "foo" to "today" and the next 2 days after this.

Rather than each month being 1 unordered-list, the plugin generates a new unordered-list for each row.

What would be the best way to find the appropriate list items when they cross into different parent elements?

Case 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>

Case 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>

I have been looking at .find, .nextAll, .nextUntil but not sure how to do it. Or should I create an array with all the days and then split it at today or something?

Answer 1

You can find all the days, then find out where in that jQuery set the "today" one is via index(element) , and then use slice to get just that and the two following:

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

Live Example (first case) :

 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> 

Live Example (second case) :

 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>