javascript - jQuery to loop through elements with the same class - Stack Overflow

admin管理员组

文章数量:1125772

I have a load of divs with the class testimonial and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.

Does anyone know how I would do this?

I have a load of divs with the class testimonial and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.

Does anyone know how I would do this?

• javascript
• jquery
• jquery-selectors

Share Improve this question Follow edited Dec 21, 2012 at 12:49 Kees C. Bakker 33.3k3131 gold badges118118 silver badges207207 bronze badges asked Jan 19, 2011 at 12:41 geoffs3310geoffs3310 14k2424 gold badges6767 silver badges8585 bronze badges 0

Add a comment  | 

15 Answers 15

Sorted by: Reset to default 1375

Use each: 'i' is the postion in the array, obj is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this) as well).

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

Check the api reference for more information.

try this...

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


    if(condition){

    }


 });

It's pretty simple to do this without jQuery these days.

Without jQuery:

Just select the elements and use the .forEach() method to iterate over them:

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

In older browsers:

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

Try this example

Html

<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>

When we want to access those divs which has data-index greater than 2 then we need this jquery.

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

Working example fiddle

you can do it this way

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

I may be missing part of the question, but I believe you can simply do this:

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

This uses jQuery's each method: https://learn.jquery.com/using-jquery-core/iterating/

jQuery's .eq() can help you traverse through elements with an indexed approach.

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

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

With a simple for loop:

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

You can do this concisely using .filter. The following example will hide all .testimonial divs containing the word "something":

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

You could use the jQuery $each method to loop through all the elements with class testimonial. i => is the index of the element in collection and val gives you the object of that particular element and you can use "val" to further access the properties of your element and check your condition.

$.each($('.testimonal'), function(i, val) { 
    if(your condition){
       //your action
    }
});

Without jQuery updated

document.querySelectorAll('.testimonial').forEach(function (element, index) {
    element.innerHTML = 'Testimonial ' + (index + 1);
});

<div class="testimonial"></div>
<div class="testimonial"></div>

In JavaScript ES6 .forEach() over an array-like NodeList collection given by Element.querySelectorAll()

document.querySelectorAll(".testimonial").forEach((el, idx) => {
  el.style.color = "red";
  console.log(`${idx} 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>

$('.testimonal').each(function(i,v){
  if (condition) {
    doSomething();
  }
});

More precise:

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

本文标签： javascriptjQuery to loop through elements with the same classStack Overflow