Question

Ok, so given this HTML structure:

<li></li>
<li style="display: none;"></li>
<li style="display: none;"></li>
<li style="display: none;"></li>
<li style="display: none;"></li>
<li></li>

So what i need is a jQuery selector that when hovering over the first li, it “shows” the next four li‘s because they have display:none on and then doesnt have any effect on the last li because it doesnt have display:none on it

Answer 1

Many ways to do this, one of which is:

$('li:first').hover(function(){
    $(this).nextUntil('li:not(:hidden)').show();   
})