Ask Ben: Iterating Over An Array With jQuery
Posted November 17, 2008 at 8:33 AM
Hi; I'm new to jquery. I have php array like:
$arr = array("one", "two", "three");
I would like to convert this array ( or copy its values) to jquery array and use .each. can someone show me this .
There are two different "each" methods in jQuery. One of them works on the jQuery stack (of DOM elements) and one of them is a utility object. They very might well work off of each other behind the scenes, but from an API view, these are two different methods with two different purposes. Luckily, the $.each() jQuery utility method does exactly what you need it to.
In the following demo, we are gonna take a Javascript array and, without any need to convert it to a jQuery array, loop over its values and add them to the document object model (DOM):
Launch code in new window » Download code as text file »
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Looping Over Arrays With jQuery</title>
-
- <!-- Linked files. -->
- <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
- <script type="text/javascript">
-
- // Init the page once the DOM has loaded.
- $( InitPage );
-
-
- // Init the page.
- function InitPage(){
- // Get a refernce to the OL list element.
- var jList = $( "#list" );
-
- // Create our test array.
- var arrValues = [ "one", "two", "three" ];
-
- // Loop over each value in the array.
- $.each(
- arrValues,
- function( intIndex, objValue ){
-
- // Create a new LI HTML element out of the
- // current value (in the iteration) and then
- // add this value to the list.
- jList.append(
- $( "<li>" + objValue + "</li>" )
- );
- }
- );
-
- }
-
- </script>
- </head>
- <body>
-
- <h1>
- Looping Over Arrays With jQuery
- </h1>
-
- <p>
- Array Items:
- </p>
-
- <!---
- This is the list into which we will be storing
- the array items.
- --->
- <ol id="list">
- <!--- List items will be added dynamically. --->
- </ol>
-
- </body>
- </html>
Notice that the $.each() method takes two parameters - the current index of the array iteration and the value that was found in the array at that index. Once we have this value, we simply use jQuery to add it to the ordered list element on the page. Running the above code, our rendered page looks like this:
Array Items:
1. one
2. two
3. three
Now, looking at this code, it might seem that the $.each() method is actually more work than a standard FOR index-loop; and, at face value, it is. But, with this small bit of additional overhead, $.each() gives us a load of benefits. By passing each iteration value to a function, we create a new local scope in which to work, we create a Closure that has awesome potential, and we create a new variable for each loop value which removes many conflicts one can run into when binding event handlers.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Reader Comments
Why is it that this line, $.each(, containts a pointer to your array? Ie, why isn't it: somevariable.each(
@Ray,
I think that's how Prototype does it; but since jQuery doesn't alter the core javascript objects, there is no each() method in the javascript array class (at least not that I know of).
I'm still confused though. How does the browser know that you are iterating over some variable? All you have is $. What if you had 2 arrays? Where is the 'link' - does that make sense? It would be like me doing
<cfoutput>#arrayLen()#</cfoutput>
withouth passing an array.
@Ray,
I think I see what you're saying. The confusion, I think, comes from the fact that when you are dealing with the jQuery stack, you can call .each() directly on that stack:
jQueryVariable.each( fnCallback );
The $.each() utility method, on the other hand, does *not* know what variable it is acting on. That is why the $.each() method takes the target variable as its first argument:
$.each( AnyArrayVariable, fnCallback );
In either case, the "this" scope of the loop points to the current iteration value. In the former example, "this" points to the current DOM element; in the latter case, the "this" scope points to the array value (one, two, or three).
To be honest, I would not be surprised if the jQueryVariable.each() method actually turned around and called the utility method on its own internal stack.
@Ben,
Exactly right. Also internally it $().each() does call $.each() to iterate the stack :)
@Shuns,
Thanks for the clarification. I figured it would do as much just to cut down on code duplication.
Yeah, thats sort of a key mantra with jQuery - as dry as possible
@Shuns,
Word up, jQuery is rockin.
@Ben,
Is this PHP user Ray? I want to know if he's doing PHP on the side instead of Coldfusion, lol!
@Hatem,
Ha ha ha :) Php :)
