I want to iterate through an HTML nested list that is 3-layers deep.
<ul> <li>animals <ul> <li>birds <ul> <li>crow</li> <li>parrot</li> </ul> </li> <li>reptiles</li> </ul> </li> <li>plants</li> <li>bugs</li> </ul>
I want it to iterate through the list so that it returns the elements in this order (note, this isn't exact text that will be displayed in fiddle; the fiddle will also include sub-elements):
animals, birds, reptiles, plants, bugs
Meaning, it skips the "youngest" or "deepest" children. As of now, I am iterating through a jQuery object.
var stepList = $("ul li ul li > ul li");
This obviously gets the children crow, parrot which is what I don't want. I need something that returns something like below minus those 2 elements:
var stepList = $("ul li");
QUESTION: Is there a jQuery object I can assign to
stepList with that will give me everything EXCEPT the children?
Edit: If not, how can I get achieve my goal?