jQuery:从Element的CHILDREN创建一个javascript ARRAY

Question

我正在尝试创建一个JavaScript ARRAY,并获取元素的子项名称.
(我不需要span元素,只需输入,选择和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");
});

使用此代码,我只获得1个元素的名称("id").当我测试数组时,索引为0,它可以工作.但是当我使用不同的索引时,说...提醒"日期"或"状态",它不起作用:

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

Answer 1

一个更清洁的版本,它抓取需要用户输入的所有字段:

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);
});

是的,您需要清理HTML.应该是这样的:

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>

Answer 2

你可以使用map(docs) -

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

map将遍历所选元素集中的每个元素,并将指定值返回到arr数组中.

您还需要稍微整理一下HTML,因为您缺少一些导致children集合填充错误的结束标记-

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

演示 - http://jsfiddle.net/M52G4/1