एक ही वर्ग के तत्वों के माध्यम से लूप करने के लिए jQuery


581

मेरे पास कक्षा के साथ divs का भार है testimonialऔर मैं एक विशेष स्थिति के सही होने पर प्रत्येक div की जांच करने के लिए उनके माध्यम से जॉकरी का उपयोग करना चाहता हूं। यदि यह सही है, तो उसे कार्रवाई करनी चाहिए।

क्या किसी को पता है कि मैं यह कैसे करूँगा?

जवाबों:


1051

प्रत्येक का उपयोग करें: ' i' सरणी में पद objहै, DOM ऑब्जेक्ट है जिसे आप पुनरावृत्त कर रहे हैं (jQuery आवरण के माध्यम से भी पहुँचा जा सकता है $(this))।

$('.testimonial').each(function(i, obj) {
    //test
});

चेक API संदर्भ में अधिक जानकारी के लिए।


2
I, obj पैरामीटर के साथ फ़ंक्शन बहुत मदद करता है। यदि बस प्रत्येक का उपयोग किया गया था, तो यह पुनरावृत्त नहीं था।

2
@Darwindeeds सही! फ़ंक्शन का उपयोग प्रत्येक आइटम को संसाधित करने के लिए वास्तविक पुनरावर्तक द्वारा किया जाता है। लौटने falseसे पुनरावृत्ति रुक ​​जाएगी।
कीस सी। बक्कर

138
यह इंगित करने योग्य है, कि "obj" डोम ऑब्जेक्ट होगा, जबकि $ (यह) jQuery ऑब्जेक्ट है।
एंड्रियास

खिचड़ी भाषा हम jQuery करते हैं (यह 'उल ली')। उस तत्व की लंबाई प्राप्त करने के लिए लंबाई?
Techie_28

16
+1 $(this)ऑब्जेक्ट को एक्सेस करने के सुझाव के लिए ... objडोम ऑब्जेक्ट होने के नाते सीधे उदाहरण के लिए फ़ंक्शन संलग्न करने की अनुमति नहीं देता हैobj.empty()
Fr0zenFyr

127

इसे इस्तेमाल करे...

$('.testimonial').each(function(){
    //if statement here 
    // use $(this) to reference the current div in the loop
    //you can try something like...


    if(condition){

    }


 });

4
FYI करें: break;नहीं टूटेगा आप का उपयोग करना चाहिएreturn false;
Kolob Canyon

53

इन दिनों jQuery के बिना यह करना बहुत आसान है।

बिना jQuery के:

बस तत्वों का चयन करें और उन पर पुनरावृति करने के लिए .forEach()विधि का उपयोग करें:

const elements = document.querySelectorAll('.testimonial');
Array.from(elements).forEach((element, index) => {
  // conditional logic here.. access element
});

पुराने ब्राउज़रों में:

var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(element, index) {
  // conditional logic here.. access element
});

42

इस उदाहरण का प्रयास करें

एचटीएमएल

<div class="testimonial" data-index="1">
    Testimonial 1
</div>
<div class="testimonial" data-index="2">
    Testimonial 2
</div>
<div class="testimonial" data-index="3">
    Testimonial 3
</div>
<div class="testimonial" data-index="4">
    Testimonial 4
</div>
<div class="testimonial" data-index="5">
    Testimonial 5
</div>

जब हम उपयोग करना चाहते उन divsहै जो data-indexअधिक से अधिक 2तो हम इस jQuery की जरूरत है।

$('div[class="testimonial"]').each(function(index,item){
    if(parseInt($(item).data('index'))>2){
        $(item).html('Testimonial '+(index+1)+' by each loop');
    }
});

वर्किंग उदाहरण फिडल


29

आप इसे इस तरह से कर सकते हैं

$('.testimonial').each(function(index, obj){
    //you can use this to access the current item
});

18

jQuery का .eq () एक अनुक्रमित दृष्टिकोण के साथ तत्वों के माध्यम से आगे बढ़ने में आपकी सहायता कर सकता है।

var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
    var element = testimonialElements.eq(i);
    //do something with element
}

1
यह वास्तव में सबसे कुशल दृष्टिकोण है।
अमीन सेतायसेफ़र

17
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}

हालांकि, आप jquery वस्तुओं को नहीं देते हैं, बस डोम तत्व
celwell

1
@celwell jQuery से आपके लिए सब कुछ करने की उम्मीद नहीं कर सकता है। यह अपनी खुद की jQuery वस्तु बनाने की बात है $(ind)
गोल्डबिशप

14

आप इसे संक्षिप्त रूप से उपयोग कर सकते हैं .filter। निम्न उदाहरण सभी .testimonial divs को छिपा देगा जिसमें "कुछ" शब्द होगा:

$(".testimonial").filter(function() {
    return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();

10

पाश के लिए एक सरल के साथ:

var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
  // Using $() to re-wrap the element.
  $(testimonials[i]).text('a');
}

8

बिना jQuery के अद्यतन

document.querySelectorAll('.testimonial').forEach(function (element, index) {
    element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>


लगभग एक ही जवाब यहाँ पहले से ही है, मुझे लगता है कि आपको मौजूदा
ओलेह रयालचेन्को

8

मैं सवाल का हिस्सा नहीं हो सकता है, लेकिन मेरा मानना ​​है कि आप बस यह कर सकते हैं:

$('.testimonial').each((index, element) => {
    if (/* Condition */) {
        // Do Something
    }
});

यह jQuery की प्रत्येक विधि का उपयोग करता है: https://learn.jquery.com/using-jquery-core/iterating/



4

ज़्यादा सही:

$.each($('.testimonal'), function(index, value) { 
    console.log(index + ':' + value); 
});

यह अच्छा है यदि आप अधिक कार्यात्मक दृष्टिकोण से पढ़ना / लिखना पसंद करते हैं।
21

4

जावास्क्रिप्ट ES6 .forEach () द्वारा दिए गए एक सरणी-जैसे नोडलिस्ट संग्रह परElement.querySelectorAll()

document.querySelectorAll('.testimonial').forEach( el => {
  el.style.color = 'red';
  console.log( `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}` );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>


प्रसार ऑपरेटर + सरणी संकेतन की जरूरत नहीं है, निश्चित रूप से doc..torAll.forEach()पर्याप्त होगा?
ऐबकविस्मिथ

धन्यवाद। पूर्ण रूप से। [...ArrayLike]उस समय के लिए उपयोग किया गया था जब क्वेरीलेटरऑल के लिए समर्थन नहीं था .forEach। @aabbccsmith
रोको सी। बुल्जन

2

आप वर्ग प्रशंसापत्र के साथ सभी तत्वों के माध्यम से लूप करने के लिए jQuery $ प्रत्येक विधि का उपयोग कर सकते हैं। i => संग्रह में तत्व का सूचकांक है और वैल आपको उस विशेष तत्व का उद्देश्य देता है और आप अपने तत्व के गुणों को आगे बढ़ाने और अपनी स्थिति की जांच करने के लिए "वैल" का उपयोग कर सकते हैं।

$.each($('.testimonal'), function(i, val) { 
    if(your condition){
       //your action
    }
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.