私はクラスtestimonial
を持つdivをたくさん持っています、そして私は特定の条件が真であるかどうか各divをチェックするためにそれらをループするためにjqueryを使いたいです。それが本当なら、それは行動を実行するべきです。
誰もが私がこれを行う方法を知っていますか?
それぞれを使用します。 '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を使わずにこれを行うのはとても簡単です。
要素を選択し、 .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>
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');
}
});
あなたはそれをこうすることができます
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
jQuery .eq() は、インデックス付きアプローチを使用して要素間を移動するのに役立ちます。
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
.filter
を使ってこれを簡潔に行うことができます。次の例では、 "something"という単語を含むすべての.testimonial divが非表示になります。
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
単純なforループを使うと:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
私は質問の一部を見逃しているかもしれませんが、私はあなたが単にこれをすることができると信じます:
$('.testimonial').each(function() {
if(...Condition...) {
...Do Stuff...
}
}
jQueryのアップデートなし
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
$('.testimonal').each(function(i,v){
if (condition) {
doSomething();
}
});
より正確な:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
JavaScriptでは ES6 を使用する spread ...
演算子
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
Element.querySelectorAll()
で与えられる array-like コレクションの上
[...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>