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-15 15:10:40Z

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, 2012 at 15:10

answered Oct 25, 2011 at 10:43

hollandben

3222 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omar Juvera Over a year ago

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.

Noah Heldman Over a year ago

Use var elements = []; instead of var elements = new Array(); for reasons explained in the second answer in this post.

ipr101 · Accepted Answer · 2011-10-25 10:47:37Z

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, 2011 at 10:47

answered Oct 25, 2011 at 10:16

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

5 Comments

Omar Juvera Over a year ago

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 Juvera Over a year ago

THANKS a lot for your help! Why $("#new").each() did not work?

ipr101 Over a year ago

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).

Omar Juvera Over a year ago

you are missing a semicolon ; after }) -At the end of your jQuery

ipr101 Over a year ago

@Omar thanks, fixed again. Please don't forget to upvote/accept the answer if it has helped :)

totallyNotLizards · Accepted Answer · 2011-10-25 10:36:14Z

0

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/

answered Oct 25, 2011 at 10:36

totallyNotLizards

8,5899 gold badges54 silver badges86 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related