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

Question

I am changing the calendar plugin. The plugin adds class today to today's date. I would like to add the class "foo" to "today" and the next 2 days after that.

Instead of each month being 1 unordered list, the plugin generates a new unordered list for each row.

What would be the best way to find matching list items when they intersect with different parent items?

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 looked at .find, .nextAll, .nextUntil, but don't know how to do this. Or do I need to create an array with all the days, and then split it for today or something else?

Answer 1

, , jQuery "" index(element), slice, :

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

Live ( ):

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>

Hide result

Live ( ):

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>

Hide result