how to convert div data into array using javascript or jquery?

Question

I want to convert this code into an array.

<div id="Parent">
     <div class="childOne" ><span id="1dfgdffsf">ChildOne </span></div>
     <div class="childOne" ><span id = "2sdfsf">ChildTwo</span> </div>
     <div class="childOne" ><span id="3sdfsf">ChildThree </span></div>
     <div class="childOne" ><span id="4dssfsf">ChildFour </span></div>
</div>

span id is dynamic. therefore i can't use it.please tell me how to convert it into an array.

Answer 1

You will have to loop over each element and push it into an array

//declare an array
var my_array = new Array();

//get all instances of the SPAN tag and iterate through each one
$('div#parent div.childOne span').each(function(){

    //build an associative array that assigns the span's id as the array id
    //assign the inner value of the span to the array piece
    //the single quotes and plus symbols are important in my_array[''++'']
    my_array[''+$(this).attr('id')+''] = $(this).text();

    //this code assigns the values to a non-associative array
    //use either this code or the code above depending on your needs
    my_array.push($(this).text());

});

Answer 2

If you do not use a library, the following should work fine:

var result = [], matches = document.querySelectorAll("#Parent span");
for (var i = 0, l = matches.length; i < l; i++) 
    result.push(matches[i].getAttribute("id"));

Else if the document.querySelectorAll function is not supported:

var result = [], parent = document.getElementByID("Parent");
for (var i = 0, l = parent.childNodes.length; i < l; i++) 
    result.push(parent.childNodes[i].childNodes[0].getAttribute("id"));

If you wanted to get key/value pairs instead you can do the following:

var result = [], matches = document.querySelectorAll("#Parent span");
for (var i = 0, l = matches.length; i < l; i++) 
    result[matches[i].getAttribute("id")] = matches[i].text;

With jQuery it is as simple as a single line of code:

var result = $("#Parent span").map(function() { return $(this).attr("id"); }).get();