jQuery 遍历具有相同类的元素

IT技术 javascript jquery jquery-selectors
2021-02-09 11:16:42

我有一个类的 div 负载,testimonial我想使用 jquery 循环遍历它们以检查每个 div 是否特定条件为真。如果是真的,它应该执行一个动作。

有谁知道我会怎么做?

6个回答

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

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

查看api 参考以获取更多信息。

带有 i, obj 参数的函数有很大帮助。如果只使用 each 则它不是迭代。
2021-03-13 11:16:42
@Darwindeeds 正确!实际迭代器使用该函数来处理每个项目。返回false将停止迭代。
2021-03-17 11:16:42
我们不能用 jQuery(this 'ul li').length 来获取元素 ul li 的长度吗?
2021-03-20 11:16:42
值得指出的是,"obj" 将是 dom 对象,而 $(this) 是 jQuery 对象。
2021-04-09 11:16:42
+1 用于建议$(this)访问对象......例如,obj作为 DOM 对象不允许直接附加函数obj.empty()
2021-04-09 11:16:42

试试这个...

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


    if(condition){

    }


 });
仅供参考:break;不会破裂。你必须使用return false;
2021-03-24 11:16:42

现在不用 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
});

试试这个例子

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>

当我们想访问那些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');
    }
});

工作示例小提琴

你可以这样做

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