jQuery循环使用相同类的元素

本文翻译自:jQuery to loop through elements with the same class

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. 我有一个带有类testimonial的div的加载,我想使用jquery循环遍历它们以检查每个div,如果特定条件为真。 If it is true, it should perform an action. 如果是,它应该执行一个动作。

Does anyone know how I would do this? 有谁知道我会怎么做?


#1楼

参考:https://stackoom.com/question/JrsU/jQuery循环使用相同类的元素


#2楼

jQuery's .eq() can help you traverse through elements with an indexed approach. jQuery的.eq()可以帮助您使用索引方法遍历元素。

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

#3楼

It's pretty simple to do this without jQuery these days. 这些天没有jQuery这样做很简单。

Without jQuery: 没有jQuery:

Just select the elements and use the .forEach() method to iterate over them: 只需选择元素并使用.forEach()方法迭代它们:

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

#4楼

Try this example 试试这个例子

Html 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. 当我们想要访问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 工作范例小提琴


#5楼

More precise: 更确切:

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

#6楼

With a simple for loop: 使用简单的for循环:

var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
  // Using $() to re-wrap the element.
  $(testimonials[i]).text('a');
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用jQuery的animate()方法和定时器实现多段文字的无限循环滚动。具体步骤如下: 1. 将需要滚动的文字内容分段包裹在多个容器元素中,将每个容器元素的宽度设置为文字内容的宽度。 2. 使用定时器,每隔一定时间执行一次滚动动画。 3. 在滚动动画完成后,判断当前滚动到的位置是否超出容器元素的宽度,如果是,则将该容器元素移动到下一个容器元素的位置。 4. 循环执行上面的步骤,实现多段文字的无限循环滚动。 下面是一个简单的示例代码: HTML代码: ``` <div class="scroll-wrap"> <div class="scroll-content"> <div class="scroll-item"> <span>这是第一段需要滚动的文字</span> </div> <div class="scroll-item"> <span>这是第二段需要滚动的文字</span> </div> <div class="scroll-item"> <span>这是第三段需要滚动的文字</span> </div> </div> </div> ``` CSS代码: ``` .scroll-wrap { overflow: hidden; } .scroll-content { display: inline-block; white-space: nowrap; } .scroll-item { display: inline-block; } ``` JavaScript代码: ``` $(function() { var $scrollWrap = $('.scroll-wrap'); var $scrollContent = $('.scroll-content'); var $scrollItems = $scrollContent.find('.scroll-item'); var scrollWidth = $scrollItems.eq(0).width(); var currentScrollIndex = 0; // 将所有容器元素的宽度设置为相同的值 $scrollItems.width(scrollWidth); // 定时器,每隔1秒执行一次滚动动画 setInterval(function() { $scrollContent.animate({ marginLeft: '-=1px' }, 10, function() { // 判断是否超出当前容器元素的宽度 if ($scrollContent.position().left <= -scrollWidth) { // 将当前容器元素移动到下一个容器元素的位置 $scrollContent.append($scrollItems.eq(currentScrollIndex).clone()); $scrollContent.css({ marginLeft: 0 }); currentScrollIndex++; if (currentScrollIndex >= $scrollItems.length) { currentScrollIndex = 0; } } }); }, 10); }); ``` 在上面的代码中,我们通过将需要滚动的文字内容分段包裹在多个容器元素中,并将每个容器元素的宽度设置为文字内容的宽度。然后使用定时器每隔一定时间执行一次滚动动画,滚动完成后判断是否超出当前容器元素的宽度,如果是,则将该容器元素移动到下一个容器元素的位置。循环执行以上步骤,实现多段文字的无限循环滚动。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值