jQuery: create a javascript ARRAY from an Element's CHILDREN

Question

I am trying to create a JavaScript ARRAY, and get the name of an element's children.
(I do not need span elements, only input, select and textarea)

HTML:

<div id="new">
    ID: <input name="id" />
    <span>Date: </span>
    <input name="date" />
    <select name="status">
        <option>New</option>
        <option>Old</option>
    </select>
    <textarea name="memo"></textarea>
... etc.
</div> <!-- END: #new -->

jQuery:

var elements=new Array();
$("#new").each(function()
{
    elements = $(this).children('input, select, textarea').attr("name");
});

With this code I only get 1 element's name ("id"). When I test the array, with index 0, it works. BUT when I use a different index, say...to alert "date" or "status", it does not work:

alert( elements[0] ); //Output: "id"
alert( elements[2] ); //Output: "undefined". It should alert "status" instead

hollandben · Accepted Answer · 2012-10-15T15:10:40.723

12

a cleaner version that grabs all fields that require an input from the user:

jQuery

var elements = [];

//iterates through each input field and pushes the name to the array
$("#new :input").each(function() {
    var name = $(this).attr("name");
    elements.push(name);
});

And yes, you need to clean up your HTML. Should look like this:

HTML

<div id="new">
    ID: <input name="id" />
    <span>Date: </span>
    <input name="date" />
    <select name="status">
        <option>New</option>
         <option>Old</option>
    </select>    
    <textarea name="memo"></textarea>
</div>

edited Oct 15 '12 at 15:10

answered Oct 25 '11 at 10:43

hollandben

322
2
9

The reason I voted for this solution over @ipr101 is because when I use *ipr101 solution to send the array through ajax/php it does not "like" the array and I get an error msg. With *hollandben solution, ajax/php takes the array just fine. However, I kinda like *ipr101 answer better. – Omar Oct 26 '11 at 09:34
Use `var elements = [];` instead of `var elements = new Array();` for reasons explained in the [second answer in this post](http://stackoverflow.com/questions/931872/whats-the-difference-between-array-and-while-declaring-a-javascript-ar). – Noah Heldman Jun 05 '12 at 19:58

ipr101 · Answer 2 · 2011-10-25T10:47:37.960

5

You could use map (docs) -

var arr = $("#new").children('input, select, textarea').map(function() {
    return $(this).attr("name");
});

map will iterate over each element in the selected element set and the return the specified value into the arr array.

You also need to tidy your HTML up a bit as you're missing some closing tags which is causing the children collection to populate incorrectly -

<div id="new">
    ID: <input name="id"/>
    <span>Date: </span>
        <input name="date"/>
    <select name="status">
        <option>New</option>
        <option>Old</option>
     </select>    
    <textarea name="memo"></textarea>
</div>

Demo - http://jsfiddle.net/M52G4/1

edited Oct 25 '11 at 10:47

answered Oct 25 '11 at 10:16

ipr101

24,096
8
59
61

You are missing a ");" after var arr...} On my website, all my HTML has ALL the proper tags. I should'v copy-and-paste :P – Omar Oct 25 '11 at 10:32
THANKS a lot for your help! Why $("#new").each() did not work? – Omar Oct 25 '11 at 10:39
I think `$(this).children('input, select, textarea').attr("name")` will only return the first name attribute in the matched set. If you'd done an each on the `children` collection and pushed each name attribute to your array it would have worked (this would have been similar to jammypeach's answer). – ipr101 Oct 25 '11 at 10:43
you are missing a semicolon ; after }) -At the end of your jQuery – Omar Oct 25 '11 at 10:46
@Omar thanks, fixed again. Please don't forget to upvote/accept the answer if it has helped :) – ipr101 Oct 25 '11 at 10:49

score 0 · Answer 3 · answered Oct 25 '11 at 10:36

quick and dirty, wouldn't recommend for real life, but theoretically:

var arr = new Array();   //initialise array
$('#new').children().each(function(){  

    //iterate through the children of the div - 
    //there shouldn't be more than one #new, unless you aren't 
    //following best practices :)

    if ($(this).attr('name'))
    {
        //if the name attr is defined, push it to the array
        arr.push($(this).attr('name'));
    }
});        
alert(arr);

fiddle: http://jsfiddle.net/GMNKm/

jQuery: create a javascript ARRAY from an Element's CHILDREN

3 Answers3