jQuery เพื่อวนลูปผ่านอิลิเมนต์ที่มีคลาสเดียวกัน


581

ฉันมีตัวหารมากมายกับชั้นเรียนtestimonialและฉันต้องการใช้ jquery เพื่อวนรอบพวกเขาเพื่อตรวจสอบแต่ละ div ว่าเงื่อนไขที่เฉพาะเจาะจงเป็นจริงหรือไม่ หากเป็นจริงควรดำเนินการ

ไม่มีใครรู้ว่าฉันจะทำเช่นนี้?

คำตอบ:


1051

ใช้แต่ละรายการ: ' i' คือตำแหน่งในอาร์เรย์objเป็นวัตถุ DOM ที่คุณกำลังวนซ้ำ (สามารถเข้าถึงได้ผ่านทาง wrapper jQuery $(this)เช่นกัน)

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

ตรวจสอบการอ้างอิง APIสำหรับข้อมูลเพิ่มเติม


2
ฟังก์ชั่นกับ i, พารามิเตอร์ obj ช่วยได้มาก หากมีการใช้เพียงแค่แต่ละครั้งก็ไม่ได้วนซ้ำ
darwindeeds

2
@Darwindeeds ถูกต้อง! ฟังก์ชั่นถูกใช้โดยตัววนซ้ำจริงเพื่อประมวลผลแต่ละรายการ การกลับมาfalseจะหยุดย้ำ
Kees C. Bakker

138
เป็นมูลค่าชี้ให้เห็นว่า "obj" จะเป็นวัตถุ Dom ในขณะที่ $ (นี้) เป็นวัตถุ jQuery
AndreasT

เราไม่ทำ jQuery (อันนี้ 'ul li'). ยาวเพื่อให้ได้ความยาวขององค์ประกอบนั้น
techie_28

16
+1 สำหรับการแนะนำ$(this)ให้เข้าถึงวัตถุ ... objเป็นวัตถุ DOM ไม่อนุญาตให้แนบฟังก์ชั่นโดยตรงobj.empty()
Fr0zenFyr

127

ลองนี้ ...

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


    if(condition){

    }


 });

4
FYI: break;จะไม่แตก คุณต้องใช้return false;
Kolob Canyon

53

มันค่อนข้างง่ายที่จะทำโดยไม่ต้อง jQuery วันนี้

ไม่มี jQuery:

เพียงเลือกองค์ประกอบและใช้.forEach()วิธีการวนซ้ำพวกเขา:

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

ในเบราว์เซอร์รุ่นเก่า:

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

42

ลองตัวอย่างนี้

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นั้นเราต้องการ jQuery นี้

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

ตัวอย่างการทำงานซอ



18

jQuery's .eq ()สามารถช่วยคุณสำรวจองค์ประกอบต่าง ๆ ด้วยวิธีการจัดทำดัชนี

var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
    var element = testimonialElements.eq(i);
    //do something with element
}

1
นี่เป็นวิธีที่มีประสิทธิภาพที่สุดแน่นอน
Amin Setayeshfar

17
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}

ที่ไม่ได้ให้วัตถุ jquery ให้คุณเพียงแค่องค์ประกอบ dom
celwell

1
@celwell ไม่สามารถคาดหวัง jQuery ให้ทำทุกอย่างให้คุณ $(ind)มันเป็นเรื่องของการทำให้วัตถุ jQuery ของคุณเอง
GoldBishop

14

.filterคุณสามารถทำได้โดยใช้รัดกุม ตัวอย่างต่อไปนี้จะซ่อน Divs คำรับรองทั้งหมดที่มีคำว่า "some":

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

10

ง่าย ๆ สำหรับวนรอบ:

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

8

ไม่มีการปรับปรุง jQuery

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


เกือบคำตอบเดียวกันนี้แล้วฉันคิดว่าคุณควรแก้ไขที่มีอยู่
Oleh Rybalchenko



4

แม่นยำยิ่งขึ้น:

$.each($('.testimonal'), function(index, value) { 
    console.log(index + ':' + value); 
});

นี่เป็นสิ่งที่ดีถ้าคุณชอบอ่าน / เขียนจากมุมมองที่ใช้งานได้มากกว่า
Sgnl

4

ใน JavaScript ES6 .forEach () เหนือคอลเล็กชันNodeList ที่มีลักษณะคล้ายอาร์เรย์ที่ กำหนดโดยElement.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>


สัญกรณ์ + อาร์เรย์ประกอบการแพร่กระจายไม่จำเป็นต้องทำก็doc..torAll.forEach()จะพอเพียง?
aabbccsmith

ขอบคุณ. อย่างแน่นอน [...ArrayLike]ถูกนำมาใช้เป็นครั้งที่ querySelectorAll .forEachไม่ได้รับการสนับสนุนสำหรับ @aabbccsmith
Roko C. Buljan

2

คุณสามารถใช้ jQuery $ แต่ละวิธีเพื่อวนรอบองค์ประกอบทั้งหมดด้วยคำรับรองของชั้นเรียน i => คือดัชนีขององค์ประกอบในคอลเลกชันและวาลให้วัตถุขององค์ประกอบนั้นและคุณสามารถใช้ "วาล" เพื่อเข้าถึงคุณสมบัติขององค์ประกอบของคุณและตรวจสอบสภาพของคุณ

$.each($('.testimonal'), function(i, val) { 
    if(your condition){
       //your action
    }
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.