jQuery: создайте массив javascript из дочерних элементов элемента

Я пытаюсь создать массив JavaScript и получить имя дочерних элементов элемента.
(мне не нужны элементы span, только input, select и 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
6
arrays children element jquery

3 ответов

более чистая версия, которая захватывает все поля, требующие ввода от пользователя:

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

вы могли бы использовать 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

5

быстрый и грязный, не рекомендовал бы для реальной жизни, но теоретически:

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

скрипка:http://jsfiddle.net/GMNKm/

0