58

On one page of my site I have have a list of entries created by the user - standard HTML <ul> with <li> elements inside it.

I want to iterate through the list, but the order of elements is important.

Using jQuery $('.myList li').each(), can I guarantee that I will get the li elements in the order that they appear in the DOM?

From my tests so far, it appears that they do get iterated in the correct order, but I can't find anything that tells me it's guaranteed.

If it isn't guaranteed, what would be the next best alternative method for iterating through them in order?

Petter Friberg
  • 21,252
  • 9
  • 60
  • 109
Simba
  • 4,952
  • 3
  • 19
  • 29
  • not duplicate but could be helpful http://stackoverflow.com/questions/1099759/does-the-order-of-the-elements-in-the-jquery-wrapped-set-always-match-the-order – Mritunjay Aug 06 '14 at 08:19

1 Answers1

101

So after reading the docs and coming away still not quite certain, I ended up diving in an actually reading the jQuery source code (thanks to @RoryMcCrossan's answer for prompting me on that).

In fact (contrary to what @RoryMcCrossan said), $().each() uses either for...in or for, depending on whether the input is an object or an array.

For 'array', it suffices to be an 'array-like' object, which is the case for a jQuery object because it contains a numbered list of elements and a length property.

Therefore, a call to $().each() will use for and not for...each as it is iterating over a jQuery object. And since we're using for, we know that we can guarantee the order of iteration for $().each() will match the order of the elements it is given.

So that leads me to ask a follow-up question of whether the order of elements given by the original query is guaranteed to be the same as they appear in the DOM. If so, then I should be okay.

The answer to that can be found in the question linked in the comments by @Mritunjay, and the answer is 'yes, they are returned in the order that they appear in the DOM.

So the final answer is that yes, I can use $('.myList li').each() and iterate through the list items in the order that they appear in the DOM.

Thanks for the help and the prompts guys. Much appreciated.

Community
  • 1
  • 1
Simba
  • 4,952
  • 3
  • 19
  • 29
  • 1
    Of course, you do realize that digging the answer out of the code is not a guarantee that the **undocumented** behavior won't change in the future. If it was my project, I would find a way to actually guarantee the desired behavior, assuming `$().each()` is not guaranteed to execute in the desired order. – Bob.at.Indigo.Health Mar 11 '22 at 03:19