मैं jQuery का उपयोग करके div के बच्चों के तत्वों के माध्यम से पुनरावृति कैसे करूं?

257

मेरे पास एक div है और इसमें कई इनपुट तत्व हैं ... मैं उन तत्वों में से प्रत्येक के माध्यम से पुनरावृति करना चाहता हूं। विचार?

jquery iteration

— Shamoon
स्रोत

476

का प्रयोग करें children()और each(), आप वैकल्पिक करने के लिए एक चयनकर्ता पारित कर सकते हैंchildren

$('#mydiv').children('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

आप तत्काल बच्चे के चयनकर्ता का भी उपयोग कर सकते हैं:

$('#mydiv > input').each(function () { /* ... */ });

— एंडी ई
स्रोत

68

फिर लूप में "वर्तमान" आइटम तक पहुंचने के लिए बंद होने के भीतर $ (इस) का उपयोग करें।

— अमरसुपरस्टार

1

@amarsuperstar: बस उस जानकारी को जोड़ने की प्रक्रिया में था :-)

— एंडी ई

क्या "n" का मूल्य जानने का एक तरीका है, $ मान लेना (यह) माता-पिता का "n" th बच्चा है?

— सौविक घोष

1

@SouvikGhosh: इंडेक्स को कॉलबैक फ़ंक्शन के पहले तर्क के रूप में पास किया गया है each()। उपरोक्त उत्तर में लिंक किए गए डॉक्स की जांच करें।

— एंडी ई

55

एक विशिष्ट संदर्भ में सभी तत्वों के माध्यम से पुनरावृति करना भी संभव है, कोई भी मैटर कितना गहरा नेस्टेड नहीं है:

$('input', $('#mydiv')).each(function () {
    console.log($(this)); //log every element found to console output
});

दूसरा पैरामीटर $ ('# mydiv') जो jQuery के 'इनपुट' चयनकर्ता को दिया जाता है, संदर्भ है। इस स्थिति में प्रत्येक () खंड #mydiv कंटेनर के भीतर सभी इनपुट तत्वों के माध्यम से पुनरावृत्ति करेगा, भले ही वे #mydiv के प्रत्यक्ष बच्चे न हों।

— Liquinaut
स्रोत

1

संभवत: घोंसले के शिकार के कारण इस समाधान ने मेरे लिए काम किया जबकि दूसरे ने नहीं किया। इस कारण से मुझे लगता है कि यह आम तौर पर बेहतर समाधान है।

— arame3333

यह वही है जिसे मैं देख रहा था। किसी भी तरह से अपने मूल्यों से json बनाने के लिए? मुझे json के रूप में सभी विषय पोस्ट करने की आवश्यकता है।

— मुहम्मद साकिब

8

यदि आपको बाल तत्वों के माध्यम से पुनरावृत्ति करने की आवश्यकता है :

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // Show element
        console.info($currentElement);
        // Show events handlers of current element
        console.info($currentElement.data('events'));
        // Loop her children
        recursiveEach($currentElement);
    });
}

// Parent div
recursiveEach($("#div"));

नोट: इस उदाहरण में, मैं एक वस्तु के साथ पंजीकृत घटनाओं संचालकों को दिखाता हूं।

— tomloprod
स्रोत

5

इसे इस तरह भी किया जा सकता है:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});

— उमर असगर
स्रोत

3

$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

यह सभी बच्चों के माध्यम से पुनरावृत्त करता है और सूचकांक मूल्य वाले उनके तत्व को क्रमशः तत्व और सूचकांक का उपयोग करके अलग से एक्सेस किया जा सकता है ।

— सूर्या स्वानॉफ़
स्रोत

1

बच्चों () अपने आप में एक पाश है।

$('.element').children().animate({
'opacity':'0'
});

— Dan185
स्रोत

1

मुझे नहीं लगता कि आपको उपयोग करने की आवश्यकता है each(), आप लूप के लिए मानक का उपयोग कर सकते हैं

var children = $element.children().not(".pb-sortable-placeholder");
for (var i = 0; i < children.length; i++) {
    var currentChild = children.eq(i);
    // whatever logic you want
    var oldPosition = currentChild.data("position");
}

इस तरह से आप लूप सुविधाओं जैसे मानक breakऔर continueडिफ़ॉल्ट रूप से काम कर सकते हैं

यह भी debugging will be easier

— बशीर अल-मोमानी
स्रोत

मेरा अनुभव यह है कि लूप $.each()की तुलना में हमेशा धीमा होता है for, और यह एकमात्र उत्तर है जो इसका उपयोग करता है। यहां कुंजी .eq()को childrenएरे के भीतर वास्तविक तत्व तक पहुंचने के लिए उपयोग करना है और ब्रैकेट नहीं है ([] ) संकेतन नहीं है।

— इलास्टैस्टर