GetElementsByClassName के माध्यम से सही ढंग से पुनरावृति कैसे करें

Question 1

मैं जावास्क्रिप्ट शुरुआत कर रहा हूँ।

मैं वेब पेज के माध्यम से इनिंग कर window.onloadरहा हूं, मुझे तत्वों के गुच्छा को उनके वर्ग नाम ( slide) द्वारा ढूंढना होगा और उन्हें कुछ तर्क के आधार पर अलग-अलग नोड्स में पुनर्वितरित करना होगा। मेरे पास फ़ंक्शन है Distribute(element)जो इनपुट के रूप में एक तत्व लेता है और वितरण करता है। मैं ऐसा कुछ करना चाहता हूं (उदाहरण के लिए यहां या यहां बताया गया है ):

var slides = getElementsByClassName("slide");
for(var i = 0; i < slides.length; i++)
{
   Distribute(slides[i]);
}

हालांकि यह मेरे लिए जादू getElementsByClassNameनहीं करता है , क्योंकि वास्तव में सरणी वापस नहीं करता है, लेकिन एक NodeList, जो है ...

... यह मेरी अटकल है ...

... फ़ंक्शन के अंदर बदला जा रहा है Distribute(इस फ़ंक्शन के अंदर DOM ट्री बदला जा रहा है, और कुछ नोड्स का क्लोनिंग होता है)।For-eachलूप संरचना या तो मदद नहीं करता है।

चर स्लाइड्स अधिनियम की वास्तव में संयुक्त राष्ट्र की निर्धारकता है, हर पुनरावृत्ति के माध्यम से यह बदल जाता है कि यह लंबाई और तत्वों का क्रम बेतहाशा है।

मेरे मामले में नोडलिस्ट के माध्यम से पुनरावृत्ति करने का सही तरीका क्या है? मैं कुछ अस्थायी सरणी भरने के बारे में सोच रहा था, लेकिन मुझे यकीन नहीं है कि यह कैसे करना है ...

संपादित करें:

महत्वपूर्ण तथ्य जिसका मैं उल्लेख करना भूल गया था कि एक स्लाइड दूसरे के अंदर हो सकती है, यह वास्तव में परिवर्तनशील है slidesजैसा कि मैंने अभी हाल ही में उपयोगकर्ता Alohci के लिए धन्यवाद पाया है ।

मेरे लिए समाधान यह था कि प्रत्येक तत्व को पहले एक ऐरे में क्लोन करें और Distribute()उसके बाद एरे-बाय-वन को पास करें ।

Question 2

MDN के अनुसार, एक से एक आइटम को पुनः प्राप्त करने का तरीका NodeList:

nodeItem = nodeList.item(index)

इस प्रकार:

var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

मैंने खुद यह कोशिश नहीं की है (सामान्य forलूप ने हमेशा मेरे लिए काम किया है), लेकिन इसे एक शॉट दें।

Question 3

यदि आप नई क्वेरी का उपयोग करते हैं, तो आप सीधे कॉल कर सकते हैं।

document.querySelectorAll('.edit').forEach(function(button) {
    // Now do something with my button
});

नीचे टिप्पणी के अनुसार। नोडलिस्ट्स के पास फ़ोरच फ़ंक्शन नहीं है।

यदि आप इसे जोड़ सकते हैं तो Array.fromइसे बाॅल के साथ प्रयोग करें और यह नॉन नोड सूचियों को फॉरैच ऐरे में बदल देगा। Array.fromनीचे दिए गए ब्राउज़रों में मूल रूप से काम नहीं करता है और IE 11 भी शामिल है।

Array.from(document.querySelectorAll('.edit')).forEach(function(button) {
    // Now do something with my button
});

कल रात हमारी मुलाक़ात के दौरान मैंने नोड सूचियों को संभालने का एक और तरीका खोजा था जिसमें कोई भी नहीं था

[...document.querySelectorAll('.edit')].forEach(function(button) {
    // Now do something with my button
});

के लिए ब्राउज़र समर्थन [...]

नोड सूची के रूप में दिखा रहा है

ऐरे के रूप में दिखा रहा है

Question 4

आप हमेशा सरणी विधियों का उपयोग कर सकते हैं:

var slides = getElementsByClassName("slide");
Array.prototype.forEach.call(slides, function(slide, index) {
    Distribute(slides.item(index));
});

Question 5

मैंने अलोहिया के रिवर्स में लूपिंग की सिफारिश का पालन किया क्योंकि यह एक जीवित है nodeList। यहां मैंने उन लोगों के लिए किया है जो उत्सुक हैं ...

  var activeObjects = documents.getElementsByClassName('active'); // a live nodeList

  //Use a reverse-loop because the array is an active NodeList
  while(activeObjects.length > 0) {
    var lastElem = activePaths[activePaths.length-1]; //select the last element

    //Remove the 'active' class from the element.  
    //This will automatically update the nodeList's length too.
    var className = lastElem.getAttribute('class').replace('active','');
    lastElem.setAttribute('class', className);
  }

Question 6

 <!--something like this--> 
<html>
<body>



<!-- i've used for loop...this pointer takes current element to apply a 
 particular change on it ...other elements take change by else condition 
-->  


<div class="classname" onclick="myFunction(this);">first</div>  
<div class="classname" onclick="myFunction(this);">second</div>


<script>
function myFunction(p) {
 var x = document.getElementsByClassName("classname");
 var i;
 for (i = 0; i < x.length; i++) {
    if(x[i] == p)
    {
x[i].style.background="blue";
    }
    else{
x[i].style.background="red";
    }
}
}


</script>
<!--this script will only work for a class with onclick event but if u want 
to use all class of same name then u can use querySelectorAll() ...-->




var variable_name=document.querySelectorAll('.classname');
for(var i=0;i<variable_name.length;i++){
variable_name[i].(--your option--);
}



 <!--if u like to divide it on some logic apply it inside this for loop 
 using your nodelist-->

</body>
</html>

Question 7

मेरे पास पुनरावृत्ति के साथ एक समान मुद्दा था और मैं यहां उतरा। शायद कोई और भी वही गलती कर रहा है जो मैंने किया।

मेरे मामले में, चयनकर्ता समस्या नहीं थी। समस्या यह थी कि मैंने जावास्क्रिप्ट कोड को गड़बड़ कर दिया था: मेरे पास एक लूप और एक सबलूप था। सबलूप iएक काउंटर के रूप में भी इस्तेमाल कर रहा था , इसके बजाय j, क्योंकि सबलूप iमुख्य लूप के मूल्य को ओवरराइड कर रहा था , यह दूसरा पुनरावृत्ति के लिए कभी नहीं मिला।

var dayContainers = document.getElementsByClassName('day-container');
for(var i = 0; i < dayContainers.length; i++) { //loop of length = 2
        var thisDayDiv = dayContainers[i];
        // do whatever

        var inputs = thisDayDiv.getElementsByTagName('input');

        for(var j = 0; j < inputs.length; j++) { //loop of length = 4
            var thisInput = inputs[j];
            // do whatever

        };

    };