jQuery วนลูป - วิธี filter()

jQuery ที่หาความหมายเกี่ยวกับการวนลูป

ตัวอย่าง

เปลี่ยนสีของทุก div และเพิ่มเข็มยุทธ์ให้กับคลาสที่ชื่อว่า "middle"

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

ลองทดลองด้วยตัวเอง

คำอธิบายและการใช้งาน

วิธี filter() จะลดชุดองค์ประกอบที่ตรงกับชุดองค์ประกอบที่ตรงกับเลือกตัวแทนที่กำหนด

รูปแบบ

.filter(selector)
ประกาศ คำอธิบาย
selector ค่าของตัวอักษร มีความหมายว่าเลือกตัวแทนที่ใช้เพื่อตรวจสอบองค์ประกอบในชุดปัจจุบัน

รายละเอียด

ถ้ามี jQuery วิธีที่แสดงความหมายว่าชุด DOM องค์ประกอบ วิธี .filter() จะสร้าง jQuery วิธีใหม่ที่มีชุดที่ตรงกับองค์ประกอบที่ตรงกับเลือกตัวแทน ตัวเลือกตัวแทนนี้จะทดสอบแต่ละองค์ประกอบ; องค์ประกอบที่ตรงกับเลือกตัวแทนจะถูกบวกเข้าไปในผลลัพธ์

คิดแนะว่าเว็บหน้านี้มีรายการที่เรียบง่าย:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>

เราสามารถนำวิธีนี้มาปรับปรุงชุดรายการนี้:

$('li').filter(':even').css('background-color', 'red');

ลองทดลองด้วยตัวเอง

ผลลัพธ์ของการเรียกใช้นี้จะเปลี่ยนสีพื้นหลังของรายการ 1, 3, 5 ให้เป็นสีแดง เพราะมันตรงกับเลือกตัวแทน (ระลึกกันว่า :even และ :odd ใช้ index ที่เริ่มต้นที่ 0)

ใช้ฟังก์ชันกรอง

รูปแบบที่สองของวิธีนี้คือ การกรองอิสระด้วยฟังก์ชันแทนด้วยเลือกตัวแทน สำหรับแต่ละองค์ประกอบ ถ้าฟังก์ชันกลับมาเป็น true องค์ประกอบนั้นจะถูกบวกเข้าไปในชุดที่ถูกกรองแล้ว; ถ้าไม่เป็น true จะถูกยกเลิกออกไป

ดูส่วนต่อไปนี้ที่เป็น HTML บางส่วนที่เกิดขึ้นในรูปแบบที่ซับซ้อนขึ้น:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>

เราสามารถเลือกช่องทางนี้และกรองเลือกตามสิ่งที่มีในเนื้อหาของมัน:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
).css('background-color', 'red');

jQuery ที่หาความหมายเกี่ยวกับการวนลูป