关于javascript：jQuery循环使用相同类的元素


jQuery to loop through elements with the same class

我有一个带有类testimonial的div负载，如果特定条件为真，我想使用jquery循环它们来检查每个div。如果是真的，它应该执行一个操作。

有人知道我会怎么做吗？

每个都使用："i是数组中的位置，obj是正在迭代的dom对象(也可以通过jquery包装器$(this)访问)。

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

有关详细信息，请查看API参考。

相关讨论

试试这个…

1
2
3
4
5
6
7
8
9
10
11
12
$('.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：

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

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

试试这个例子

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
    Testimonial 1


    Testimonial 2


    Testimonial 3


    Testimonial 4


    Testimonial 5

当我们想要访问那些divs大于2的data-index时，我们需要这个jquery。

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

工作示例小提琴

你可以这样做

1
2
3
$('.testimonial').each(function(index, obj){
    //you can use this to access the current item
});
1
2
3
4
5
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}
相关讨论

jquery的.eq()可以帮助您使用索引方法遍历元素。

1
2
3
4
5
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
    var element = testimonialElements.eq(i);
    //do something with element
}
相关讨论

您可以使用.filter简洁地完成此操作。以下示例将隐藏所有包含"something"一词的推荐离婚：

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

使用简单的for循环：

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

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

1
2
3
4
5
$('.testimonial').each(function() {
    if(...Condition...) {
        ...Do Stuff...
    }
}

未更新jquery

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

相关讨论

1
2
3
4
5
$('.testimonal').each(function(i,v){
  if (condition) {
    doSomething();
  }
});

更精确：

1
2
3
$.each($('.testimonal'), function(index, value) {
    console.log(index + ':' + value);
});
相关讨论

在JavaScriptES6中，使用spread ...运算符

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

在Element.querySelectorAll()给出的类似数组的集合上

1
2
3
4
5
[...document.querySelectorAll('.testimonial')].forEach( el => {
  el.style.color = 'red';
  const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
  console.log( stuff );
});
1
2
3
4
<p class="testimonial" id="1">This is some text
</p>

Lorem ipsum