jQuery循环使用相同类的元素

14 回答

• 845

  试试这个...

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

  回复于 2024-05-01T04:52:24+08:00
• 4

  试试这个例子

  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>
  

  当我们想要访问那些 data-index 大于 2 的 divs 时，我们需要这个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

  回复于 2024-05-01T04:52:24+08:00
• 36

  jQuery's .eq()可以帮助您使用索引方法遍历元素 .

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

  回复于 2024-05-01T04:52:24+08:00
• 40

  更确切：

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

  回复于 2024-05-01T04:52:24+08:00
• 8

  在JavaScript ES6 中使用spread ... operator

  [...document.querySelectorAll('.testimonial')].forEach( el => {
      el.style.color = 'red';
  });
  

  Element.querySelectorAll() 给出的 array-like 集合

  [...document.querySelectorAll('.testimonial')].forEach( el => {
    el.style.color = 'red';
    const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`; 
    console.log( stuff );
  });
  

  <p class="testimonial" id="1">This is some text</p>
  
  <div class="testimonial" id="2">Lorem ipsum</div>
  

  回复于 2024-05-01T04:52:24+08:00
• 2

  我可能会遗漏部分问题，但我相信你可以这样做：

  $('.testimonial').each(function() {
      if(...Condition...) {
          ...Do Stuff...
      }
  }
  

  回复于 2024-05-01T04:52:24+08:00
• 105

  你可以这样做

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

  回复于 2024-05-01T04:52:24+08:00
• 17

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

  回复于 2024-05-01T04:52:24+08:00
• 6

  使用每个：' i '是数组中的位置， obj 是您正在迭代的DOM对象（也可以通过jQuery包装器 $(this) 访问） .

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

  有关更多信息，请查看api reference .

  回复于 2024-05-01T04:52:24+08:00
• 7

  这些天没有jQuery这样做很简单 .

  没有jQuery：

  只需选择元素并使用.forEach() method迭代它们：

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

  回复于 2024-05-01T04:52:24+08:00
• 26

  使用简单的for循环：

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

  回复于 2024-05-01T04:52:24+08:00
• 13

  您可以使用.filter简明扼要地完成此操作 . 以下示例将隐藏包含单词"something"的所有.testimonial div：

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

  回复于 2024-05-01T04:52:24+08:00
• 8

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

  回复于 2024-05-01T04:52:24+08:00
• 13

  Without jQuery updated

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

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

  回复于 2024-05-01T04:52:24+08:00