jQuery循环通过具有相同类的元素
我有类加载的证书,我想要使用jquery循环通过他们检查每个div如果一个特定的条件是真的。 如果这是真的,它应该执行一个动作。
有谁知道我会怎么做?
使用each:' i
'是数组中的位置, obj
是您正在迭代的DOM对象(也可以通过jQuery wrapper $(this)
来访问)。
$('.testimonial').each(function(i, obj) { //test });
检查API参考了解更多信息。
尝试这个…
$('.testimonial').each(function(){ //if statement here // use $(this) to reference the current div in the loop //you can try something like... if(condition){ } });
这些没有jQuery这样做非常简单。
没有jQuery:
只需select元素并使用.forEach()
方法遍历它们即可:
var testimonials = document.querySelectorAll('.testimonial'); Array.prototype.forEach.call(testimonials, function(elements, index) { // conditional here.. access elements });
试试这个例子
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'); } });
工作示例小提琴
你可以这样做
$('.testimonial').each(function(index, obj){ //you can use this to access the current item });
divs = $('.testimonial') for(ind in divs){ div = divs[ind]; //do whatever you want }
您可以使用.filter
简洁地做到这.filter
。 下面的例子将隐藏所有包含单词“something”的.testimonial div:
$(".testimonial").filter(function() { return $(this).text().toLowerCase().indexOf("something") !== -1; }).hide();
jQuery的.eq()可以帮助你用索引方法遍历元素。
var testimonialElements = $(".testimonial"); for(var i=0; i<testimonialElements.length; i++){ var element = testimonialElements.eq(i); //do something with element }
我可能会遗漏部分问题,但我相信你可以简单地做到这一点:
$('.testimonial').each(function() { if(...Condition...) { ...Do Stuff... } }
$('.testimonal').each(function(i,v){ if (condition) { doSomething(); } });
更确切:
$.each($('.testimonal'), function(index, value) { console.log(index + ':' + value); });
用一个简单的for循环:
var testimonials= $('.testimonial'); for (var i = 0; i < testimonials.length; i++) { // Using $() to re-wrap the element. $(testimonials[i]).text('a'); }
没有jQuery更新
document.querySelectorAll('.testimonial').forEach(function (element, index) { element.innerHTML = 'Testimonial ' + (index + 1); });
<div class="testimonial"></div> <div class="testimonial"></div>