CODEWITHSUNDEEP
jqueryjquery-selectors
Russell Bevan
Russell Bevan

Reputation: 334

jQuery - How do I find the next sibling that does not have class?

I have a list that has an expanded class that is dynamically set. I'm having trouble finding the the next list item in relation to ONLY the visible elements. .siblings(':visible') and .next(':visible') do not seem to work when the selector is on jQuery('.expanded') presumably because it is looking for the next expanded class. 

<ul id="list_1" class="list">
    <li class="gridImage" data-id="Christmas"></li> //not visible
    <li class="gridImage" data-id="Christmas"></li> //not visible
    <li class="gridImage expanded" data-id="Easter"></li>
    <li class="gridImage" data-id="Valentines"></li> //not visible
    <li class="gridImage" data-id="Easter"></li>
    <li class="gridImage" data-id="Miscellaneous"></li> //not visible
</ul>

Upvotes: 0

Views: 830

Answers (2)

DanielST
DanielST

Reputation: 14133

here is another way: http://jsfiddle.net/slicedtoad/kqpbh3fv/

$('.expanded').nextAll(":visible").first()

nextAll is like next but it grabs all the following siblings that match the selector. First takes only the first.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can try something like

.nextUntil(':visible').last().next()

that is find all the siblings till the next visible one, then take the last one from the set(so its next sibling should be the visible one) then its next sibling.

Upvotes: 1

Related Questions