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.
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());
});
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();
First of all, try to avoid naming id's and classes from capital letters. Then try this:
var arr = [];
$('#parent').children().each(function(){
arr.push($(this).find('span').text());
}
maybe this is the best way currently
const array = Array.from(document.querySelectorAll('.childOne'));
[...document.querySelectorAll(selector)].Below Code May be help you :
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<script>
var elems = document.getElementsByTagName("div"); // returns a nodeList
var arr = jQuery.makeArray(elems);
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
</script>
</body>
</html>
This would be simple one, as :
jQuery(function($) {
var anArray = [];
$("#Parent").find("span").each(function(){
anArray.push($(this).html());
});
alert(anArray);
});
