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

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>