jQuery для перебора элементов с одинаковым классом
У меня есть загрузка divs с классом testimonial
и я хочу использовать jquery для цикла через них, чтобы проверить для каждого div, если определенное условие истинно. Если это правда, он должен выполнить действие.
кто-нибудь знает, как я это сделаю?
14 ответов
использовать каждый: 'i
- это позиция в массиве, obj
- это объект DOM, который вы повторяете (можно получить доступ через оболочку jQuery $(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:
просто выберите элементы и использовать .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>
когда мы хотим получить доступ к этим divs
имеющего data-index
больше 2
тогда нам нужен этот проект.
$('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
});
Вы можете сделать это лаконично, используя .filter
. Следующий пример скроет все .отзывы divs, содержащие слово "что-то":
$(".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...
}
}
С простым циклом 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>
В JavaScript ЕС6 используя распространение ...
оператор
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
на массив-как коллекция выданный Element.querySelectorAll()
[...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>