Question

Basically, is there a way to ‘cycle’ through child elements.

i.e.:

<ul>
<li>some text</li>
<li>some more text</li>
<li>even more text</li>
</ul>

I want to get the text from the first <li>, perform a few operations, then move on to the next one and next one until I have gone through all of the child elements.

Is this possible?

Answer 1

Your question could use a little more explanation, but jQuery’s .each() is what I think you are looking for. Not to by confused with jQuery.each, which you can use to iterate over any collection, .each iterates over all of the elements that are within the jQuery object created from your selector expression. It executes a callback function for each element that is part of the jQuery object. The callback function is passed the index of the element and the element itself. It’s important to note that the callback is fired in the context of the current DOM element, so this refers to the element, and is not a jQuery object. So you could do something like:

$("selectorForListElem").children().each(function(index, currentElem) {
    // processing for current child element
});

I’ve created a very simple example over on jsFiddle.