Load Child Elements of DOM in Array

Posted by Stephan Kristyn on May 23rd, 2010 / No Comments

To load child elements of an HTML element into an array I use the Jquery method .map() that passes each element of a matching set through a function.

This function returns us an ‘.id’ or a value ‘.val’ of a matching object. Then we append the .get() method, which grants us access to the DOM nodes underlying the object. These are loaded into an array; at least if you do not specify any value with .get().

For better understanding, please view this code snippet written in HTML5.


<!doctype html> <!-- love the new doctype declaration -->
<html lang="en">
<head>
<meta charset="windows-1252"> <!-- equals ANSI -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
   var subPicArray = $('#bilder1 img').map(function() {
     return this.id; // could also get a value or class
   }).get();
   alert (subPicArray[0]); // picID1
});</script>
</head>
<body>
<div id="bilder1">
   <a href="pic1_big.jpg"><img id="picID1" src="pic1.jpg" alt="" /></a>
   <a href="pic2_big.jpg"><img id="picID2" src="pic2.jpg" alt="" /></a>
   <a href="pic3_big.jpg"><img id="picID3" src="pic3.jpg" alt="" /></a>
</div>
</body>
</html>