Ich habe eine Reihe von Divs mit der Klasse "Testimonial", und ich möchte Jquery verwenden, um eine Schleife durch sie zu überprüfen, für jedes Div, wenn eine bestimmte Bedingung wahr ist. Wenn es wahr ist, sollte es eine Aktion durchführen.
Weiß jemand, wie ich dies tun würde?
Verwenden Sie jeweils: 'i
' ist die Position im Array, obj
ist das DOM-Objekt, das Sie iterieren (kann durch den jQuery-Wrapper $(this)
auch zugegriffen werden).
$('.testimonial').each(function(i, obj) {
//test
});
In der api reference finden Sie weitere Informationen.
Versuchen Sie dies...
$('.testimonial').each(function(){
//if statement here
// use $(this) to reference the current div in the loop
//you can try something like...
if(condition){
}
});
Es ist heutzutage ziemlich einfach, dies ohne jQuery zu tun.
Wählen Sie einfach die Elemente aus und verwenden Sie die [.forEach()
Methode][1], um über sie zu iterieren:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
// conditional here.. access elements
});
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Versuchen Sie dieses Beispiel
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>
Wenn wir auf die Divs
zugreifen wollen, deren Datenindex
größer als 2
ist, dann brauchen wir diese Abfrage.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
[Arbeitsbeispiel Geige][1]
[1]:
Sie können es auf folgende Weise tun
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
[jQuery's .eq()][1] kann Ihnen beim Durchlaufen von Elementen mit einem indizierten Ansatz helfen.
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
Sie können dies kurz und bündig mit [.filter
][1] tun.
Im folgenden Beispiel werden alle .testimonial-Divisionen ausgeblendet, die das Wort "etwas" enthalten:
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
Mit einer einfachen for-Schleife:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
Vielleicht ist mir ein Teil der Frage entgangen, aber ich glaube, Sie können dies einfach tun:
$('.testimonial').each((index, element) => {
if (/* Condition */) {
// Do Something
}
});
Dies verwendet jQuery's jede Methode: https://learn.jquery.com/using-jquery-core/iterating/
ohne jQuery aktualisiert
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
Genauer:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
In JavaScript ES6 [.forEach()][1]
über eine array-ähnliche [NodeList-Sammlung][2], die durch Element.querySelectorAll()
gegeben wird
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>
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach [2]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList
Sie könnten die jQuery $each-Methode verwenden, um eine Schleife durch alle Elemente mit Klassenzeugnis zu bilden. i => ist der Index des Elements in der Sammlung, und val gibt Ihnen das Objekt dieses bestimmten Elements, und Sie können "val" verwenden; verwenden, um weiter auf die Eigenschaften Ihres Elements zuzugreifen und Ihre Bedingung zu überprüfen.
$.each($('.testimonal'), function(i, val) {
if(your condition){
//your action
}
});