jQuery: एलिमेंट के CHILDREN

Question

से जावास्क्रिप्ट ARRAY बनाएं, मैं एक जावास्क्रिप्ट ARRAY बनाने की कोशिश कर रहा हूं, और किसी तत्व के बच्चों का नाम प्राप्त कर रहा हूं।

<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 तत्व का नाम मिलता है ("आईडी")। जब मैं इंडेक्स 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 को साफ करने की जरूरत है। इस तरह दिखना चाहिए:

एचटीएमएल

<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 सरणी में वापस कर देगा।

तुम भी रूप में आप कुछ समापन टैग जो children संग्रह गलत तरीके से पॉप्युलेट करने के लिए खड़ी कर रहा है भूल रहे हैं थोड़ा अपने 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> 

डेमो - http://jsfiddle.net/M52G4/1

Answer 3

त्वरित और गंदी, वास्तविक जीवन के लिए सिफारिश करेंगे नहीं, लेकिन सैद्धांतिक रूप:

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/