I’m trying to use the JQuery nextAll() function but would like to filter out the results set based on the child elements classes.
With JQuery I can do the following selector:
$('li > .do')
Which should find all <li>
elements and check each of their children for the do class.
According to the JQuery documentation, the nextAll() accepts in an optional parameter that’s equivalent to the normal selector parameter.
So I’m trying to do the following:
$("li.start").nextAll('li > .do')
But I’m not getting any results back.
I’ve created the following on W3Schools to simulate what I’m trying to do:
Example
Having the following HTML:
<ul>ul (parent)
<li>li (sibling)</li>
<li><div class="do">li (expected not to highlight)</div></li>
<li class="start">li (sibling with class name "start")</li>
<li><img class="do">li (expected to highlight)</img></li>
<li><div class="dont">li (expected not to highlight)</div></li>
<li><div class="do">li (expected to highlight)</div></li>
</ul>
I’m trying to find all the li
elements after the .start
element that has a child with the .do
class:
$("li.start").nextAll('li > .do')
I’m expecting all the .do elements to have the highlighted effect applied.
Am I misunderstanding the documentation or doing something wrong?
If I just use $("li.start").nextAll('li').css({"color": "red", "border": "2px solid red"});
then it seems to work, but I’m unable to query child elements for the specified class.