jQuery: erstellen Sie ein javascript-ARRAY von einem Element KINDER

Ich versuche, erstellen Sie eine JavaScript-ARRAY und den Namen eines element-Kinder.

(Ich brauche nicht span-Elemente, nur input, select und 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");
});

Mit diesem code bekomme ich nur 1 element name ("id"). Wenn ich zum testen das array mit dem index 0, es funktioniert. ABER wenn ich eine andere index, sagen wir...zu warnen "Datum" oder "status", es funktioniert nicht:

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

InformationsquelleAutor Omar | 2011-10-25

  1. 11

    eine sauberere version, packt alle Felder erfordern eine Eingabe vom Benutzer:

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

    Und ja, Sie brauchen, um aufzuräumen den HTML-Code. Sollte so Aussehen:

    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>
    jsfiddle.net/TeLwS
    Dies ist ein guter zu werden 😛
    Der Grund, ich habe für diese Lösung über @ipr101 ist, weil wenn ich *ipr101 Lösung senden Sie das array über ajax/php tut es nicht "wie" das array und ich erhalte eine Fehlermeldung msg. Mit *hollandben Lösung, ajax/php nimmt das array nur in Ordnung. Allerdings habe ich Sie irgendwie aus wie *ipr101 Antwort besser.
    Verwenden var elements = []; statt var elements = new Array(); für Gründe, die oben in der zweite Antwort in diesem post.

    InformationsquelleAutor hollandben

  2. 5

    Könnten Sie map (docs) -

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

    map iteriert über jedes element in der ausgewählten element-set und die Rückkehr der angegebene Wert in der arr array.

    Müssen Sie auch ordentlich Ihre HTML ein wenig, wie du bist fehlen einige schließende tags, die die Ursache der children Sammlung zu füllen falsch -

    <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

    Ihnen fehlt ein ");" nach var arr...} Auf meiner website, alle meine HTML hat ALLE die richtigen tags. Ich sollte ' V kopieren und einfügen 😛
    vielen Dank für den Hinweis auf den Tippfehler, der jetzt behoben ist.
    Vielen DANK für Eure Hilfe! Warum $("#new").each() nicht funktioniert?
    Ich denke $(this).children('input, select, textarea').attr("name") wird nur der erste name-Attribut in dem aufeinander abgestimmten Satz. Wenn Sie getan hatte, ein jeder auf der children Sammlung und schob jedes Attribut name Ihres array ist, es würde gearbeitet haben (dies entspräche in etwa jammypeach Antwort).
    Ihnen fehlt ein Semikolon ; nach }) -Am Ende Ihres jQuery

    InformationsquelleAutor ipr101

  3. 0

    quick-and-dirty, würde es nicht empfehlen, für das wirkliche Leben, aber theoretisch:

    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/

    InformationsquelleAutor totallyNotLizards

Schreibe einen Kommentar