Currently, I have a set of LI tags. As users filter the LIs, some may be removed from view. My goal is to assign alternating background colors to the visible LIs.
When an LI is visible, it is given the class "LI-Shown." If an LI gets filtered out, I remove the LI-Shown class.
After filtering, my HTML could look like this:
<ul id="LI-List">
<li id="1" class="LI-Shown">Showing</li>
<li id="2" class="LI-Shown">Showing</li>
<li id="3" style="display:none">Was Filtered Out</li>
<li id="4" class="LI-Shown">Showing</li>
</ul>
This is my current CSS code:
.LI-List .LI-Shown:nth-child(even) {
background-color: gray;
}
The alternating background works when all 4 LIs are visible or initially loaded. However, after filtering down, both the 2nd and 4th LI have gray backgrounds, even though the 3rd LI has been removed from view along with its LI-Shown class.
What should happen is that only the LI-Shown classes (IDs 1, 2, and 4) should be displayed, and only ID = 2 should have a gray background.
I am struggling to find a way for the CSS to treat the 4th LI as if it were the 3rd LI-Shown class. It needs to revert to its default background color instead of staying gray.
In addition to CSS, I also attempted to utilize jQuery directly using the following code:
$('.LI-List .LI-Shown').filter(":even").css('background', 'gray');
Any assistance would be greatly appreciated. Thank you!