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(এই ফাংশনের অভ্যন্তরে ডিওএম গাছ পরিবর্তন করা হচ্ছে এবং নির্দিষ্ট নোডের ক্লোনিং ঘটে)। For-eachলুপ কাঠামো সাহায্য করে না।

ভেরিয়েবল স্লাইডগুলি সত্যিকার অর্থে অ-নিরস্তুত্ববাদী আচরণ করে, প্রতিটি পুনরাবৃত্তির মাধ্যমে এটি দৈর্ঘ্য এবং উপাদানগুলির বন্যাকে ক্রমবর্ধমানভাবে পরিবর্তন করে।

আমার ক্ষেত্রে নোডলিস্টের মাধ্যমে পুনরাবৃত্তি করার সঠিক উপায় কী? আমি কিছু অস্থায়ী অ্যারে পূরণ করার কথা ভাবছিলাম, তবে কীভাবে তা করব তা নিশ্চিত নই ...

সম্পাদনা:

গুরুত্বপূর্ণ বিষয়টি আমি উল্লেখ করতে ভুলে গেছি যে অন্যটির অভ্যন্তরে একটি স্লাইড থাকতে পারে, এটি আসলে slidesভেরিয়েবলকে পরিবর্তন করে কারণ আমি কেবল ব্যবহারকারী অলহিকে ধন্যবাদ জানলাম ।

আমার জন্য সমাধানটি হ'ল প্রতিটি উপাদানকে প্রথমে অ্যারেতে ক্লোন করা এবং অ্যারে ওনো বাই একটিকে Distribute()পরে প্রবেশ করানো ।

Question 2

এমডিএন অনুসারে, একটি থেকে কোনও আইটেম উদ্ধার করার উপায়টি 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নীচের ব্রাউজারগুলিতে এবং আইই 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

        };

    };