jQuery para percorrer elementos com a mesma classe

582

Eu tenho uma carga de divs com a classe testimoniale quero usar o jquery para fazer um loop através deles para verificar cada div se uma condição específica for verdadeira. Se for verdade, deve executar uma ação.

Alguém sabe como eu faria isso?

geoffs3310
fonte

Respostas:

1052

Use each: ' i' é a posição na matriz, objé o objeto DOM que você está iterando (também pode ser acessado através do wrapper jQuery $(this)).

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

Verifique a referência da API para obter mais informações.

Kees C. Bakker
fonte
2
A função com os parâmetros i, obj ajuda muito. Se apenas cada um foi usado, não foi iterativo.
darwindeeds
2
@Darwindeeds correct! A função é usada pelo iterador real para processar cada item. Retornar falseinterromperá a iteração.
precisa
138
Vale ressaltar que "obj" será o objeto dom, enquanto $ (this) é o objeto jQuery.
AndreasT
Não podemos fazer jQuery (este 'ul li'). Length para obter o comprimento desses elementos ul li?
TechTudo_21
16
+1 para sugerir $(this)para acessar o objeto ... objsendo objeto DOM não permite anexar funções diretamente por exemploobj.empty()
Fr0zenFyr
127

tente isso ...

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


    if(condition){

    }


 });
stephen776
fonte
4
FYI: break;não vai quebrar. Você deve usarreturn false;
Kolob Canyon
53

É bem simples fazer isso sem o jQuery atualmente.

Sem jQuery:

Basta selecionar os elementos e usar o .forEach()método para iterar sobre eles:

const elements = document.querySelectorAll('.testimonial');
Array.from(elements).forEach((element, index) => {
  // conditional logic here.. access element
});

Em navegadores antigos:

var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(element, index) {
  // conditional logic here.. access element
});
Josh Crozier
fonte
42

Experimente este exemplo

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>

Quando queremos acessar aqueles divsque são data-indexmaiores que o 2necessário, precisamos desse jquery.

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

Exemplo de trabalho violino

Manoj
fonte
29

você pode fazer assim

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

.eq () do jQuery pode ajudá-lo a percorrer elementos com uma abordagem indexada.

var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
    var element = testimonialElements.eq(i);
    //do something with element
}
Atharva
fonte
1
esta é a abordagem mais eficiente de fato.
Amin Setayeshfar
17
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}
ikostia
fonte
que não dar-lhe os objetos jQuery embora, elementos apenas dom
Celwell
1
A @celwell não pode esperar que o jQuery faça tudo por você. É uma questão de criar seu próprio objeto jQuery $(ind).
GoldBishop
14

Você pode fazer isso de forma concisa usando .filter. O exemplo a seguir oculta todas as divs .testimonial que contêm a palavra "something":

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

Com um loop for simples:

var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
  // Using $() to re-wrap the element.
  $(testimonials[i]).text('a');
}
Ismail Rubad
fonte
8

Sem o jQuery atualizado

document.querySelectorAll('.testimonial').forEach(function (element, index) {
    element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>

KrisInception
fonte
quase a mesma resposta já está aqui, eu acho que você deve editar existente
Oleh Rybalchenko
8

Pode estar faltando parte da pergunta, mas acredito que você pode simplesmente fazer isso:

$('.testimonial').each((index, element) => {
    if (/* Condition */) {
        // Do Something
    }
});

Isso usa cada método do jQuery: https://learn.jquery.com/using-jquery-core/iterating/

David Smith
fonte
6
$('.testimonal').each(function(i,v){
  if (condition) {
    doSomething();
  }
});
davin
fonte
4

Mais preciso:

$.each($('.testimonal'), function(index, value) { 
    console.log(index + ':' + value); 
});
Atif Tariq
fonte
Isso é bom se você gosta de ler / escrever de uma perspectiva mais funcional.
SGNL
4

No JavaScript ES6 .forEach (), sobre uma coleção NodeList semelhante a uma matriz, fornecida porElement.querySelectorAll()

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

Roko C. Buljan
fonte
A notação do operador spread + array não é necessária, certamente fazer isso doc..torAll.forEach()seria suficiente?
aabbccsmith
Obrigado. Absolutamente. [...ArrayLike]foi usado durante o tempo em que querySelectorAll não tinha suporte .forEach. @aabbccsmith
Roko C. Buljan
2

Você pode usar o jQuery $ each método para percorrer todos os elementos com depoimento de classe. i => é o índice do elemento na coleção e val fornece o objeto desse elemento específico e você pode usar "val" para acessar ainda mais as propriedades do seu elemento e verificar sua condição.

$.each($('.testimonal'), function(i, val) { 
    if(your condition){
       //your action
    }
});
Nidhi Gupta
fonte