प्रत्येक लूप के लिए क्लासिक के रूप में प्रत्येक() का उपयोग करते हुए JQuery और सभी एक बार

Question

मैं div टैग के एक सेट के माध्यम से लूप करने की कोशिश कर रहा हूं और उन्हें एक समय में बाहर और बाहर फीका कर रहा हूं। अब तक, .each() ऑपरेटर का उपयोग करके, यह सब एक बार में करता है। आप प्रत्येक लूप के लिए अधिक क्लासिक के रूप में .each() का उपयोग कैसे करते हैं?

यहां मेरा JQuery कोड स्निपेट है और वर्तमान में यह सभी div टैग को एक साथ एक साथ बाहर और बाहर फीका करता है।

$("document").ready(function() { 
// all div tags are hidden at start 

    $(".myclass").each(function (i) { 
     var $div = $(this); 
     showDiv($div); 
     hideDiv($div); 
}); 

function showDiv(theDiv) 
{ 
     $(theDiv).fadeIn(4000); 
} 

function hideDiv(theDiv) 
{ 
     $(theDiv).fadeOut(4000); 
}  
}); 

, सवाल पर विचार के लिए धन्यवाद

Answer 1

यह बनाम एक सादे for पाश .each() उपयोग के बारे में नहीं है। समस्या यह है कि एनीमेशन टाइमआउट के माध्यम से संभाला जाता है (jQuery द्वारा प्रबंधित)। एनीमेशन होने से पहले .fadeIn() और .fadeOut() पर तुरंत कॉल करें।

आप प्रत्येक fadeIn() करने के लिए कुछ देरी जोड़ सकते हैं, या आप अपने कोड को अलग ढंग से की संरचना कर सकते हैं:

$("document").ready(function() { 
    var divs = $('.myclass'), i = 0; 
    function reveal() { 
    if (i === divs.length) return; 
    divs.eq(i).fadeIn(4000, function() { 
     divs.eq(i).fadeOut(4000, function() { 
     i++; 
     setTimeout(reveal, 0); 
     }); 
    }); 
    } 
    setTimeout(reveal, 0); 
}); 

Answer 2

उपयोग देरी:

var delay = 0; 
$(".myclass").each(function (i) { 
    var $div = $(this); 
    showDiv($div); 
    hideDiv($div, delay); 
    delay += 100; 
}); 


function hideDiv(theDiv, delay) 
{ 
    $(theDiv).fadeOut(4000).delay(delay); 
} 

Answer 3

आपका .each समारोह के रूप में उम्मीद काम करता है। उम्मीद के अनुसार काम नहीं करता तथ्य यह है कि जावास्क्रिप्ट प्रकृति में असीमित है। यह पर कॉल करने से पहले showDiv को पूरा करने के लिए प्रतीक्षा नहीं करता है। तब कॉल एक-दूसरे के साथ संघर्ष करना शुरू कर देते हैं।

इसके बजाय आप जो उपयोग करना चाहते हैं वह एक अंतराल है जो वास्तव में jQuery का हिस्सा नहीं है बल्कि जावास्क्रिप्ट में बना है।

कुछ इस तरह:

function showHide(theDiv) { 
    if($(theDiv).is(":visible")) { 
      $(theDiv).fadeOut(4000); 
    } 
    else { 
      $(theDiv).fadeIn(4000); 
    } 
} 

setInterval(function() { showHide("#theDivsID") }, 4100);