การกรองขั้นสูงด้วย .filter()
สำรวจความสามารถทั้งหมดของเมธอด .filter() โดยใช้ฟังก์ชันเพื่อใช้ตรรกะแบบกำหนดเองและเลือกองค์ประกอบตามคุณสมบัติหรือความสัมพันธ์แบบไดนามิก
การกรองขั้นสูงด้วย .filter() เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน
ปรับการเลือกให้ละเอียดด้วย .filter()
เมธอด .filter() ใน jQuery เป็นวิธีอันทรงพลังในการจำกัดชุดองค์ประกอบที่เลือกไว้แล้วให้แคบลง โดยช่วยเก็บไว้เฉพาะองค์ประกอบที่ตรงตามเกณฑ์ที่กำหนด
ลองนึกภาพว่าเป็นการเลือกอีกชั้นหนึ่ง ซึ่งทำหลังจากการเลือกครั้งแรก เพื่อให้ได้ผลลัพธ์ที่แม่นยำยิ่งขึ้น
การกรองพื้นฐานด้วยตัวเลือก
วิธีที่ง่ายที่สุดในการใช้ .filter() คือระบุสตริงตัวเลือก CSS วิธีนี้ทำงานเหมือนตัวเลือกทั่วไป แต่จะใช้กับองค์ประกอบที่อยู่ในชุด jQuery ปัจจุบันของคุณเท่านั้น
มาลองเลือก div ทั้งหมดที่มีคลาส .item แล้วกรองให้เหลือเฉพาะองค์ประกอบที่มีคลาส .active ด้วย
<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="item">Item 1</div>
<div class="item active">Item 2</div>
<div class="item">Item 3</div>
<div class="item active">Item 4</div>
<script>
$(document).ready(function(){
// Select all divs with class 'item'
var allItems = $('div.item');
// Then filter to keep only those with class 'active'
var activeItems = allItems.filter('.active');
activeItems.css('color', 'blue');
});
</script>
</body>
</html>ตรรกะแบบกำหนดเองด้วยฟังก์ชัน
จุดเด่นที่แท้จริงของ .filter() จะปรากฏเมื่อคุณส่งฟังก์ชันเป็นอาร์กิวเมนต์ วิธีนี้ช่วยให้คุณใช้ตรรกะแบบกำหนดเองและทำงานแบบไดนามิกกับแต่ละองค์ประกอบในการเลือกได้
- ฟังก์ชันจะทำงานกับแต่ละองค์ประกอบในชุด jQuery ปัจจุบัน
- ฟังก์ชันรับอาร์กิวเมนต์สองรายการ ได้แก่
index(ตำแหน่งขององค์ประกอบในชุด) และelement(องค์ประกอบ DOM ดิบ) - คืนค่า
trueเพื่อเก็บองค์ประกอบไว้ และคืนค่าfalseเพื่อนำองค์ประกอบนั้นออกจากชุดที่กรองแล้ว
กรองตามตำแหน่งดัชนี
คุณสามารถใช้อาร์กิวเมนต์ index ในฟังก์ชันกรองเพื่อเลือกองค์ประกอบตามตำแหน่งภายในชุด jQuery ปัจจุบันได้ เหมาะสำหรับงานอย่างการเลือกทุกรายการลำดับที่สองหรือช่วงที่ระบุ
มาลองเลือกองค์ประกอบรายการทุกลำดับที่สอง (องค์ประกอบที่มีดัชนีเป็นเลขคู่ โดยเริ่มนับจาก 0) แล้วเน้นองค์ประกอบเหล่านั้น
<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function(index) {
// Keep items at even indices (0, 2, 4...)
return index % 2 === 0;
}).css('background-color', 'lightgreen');
});
</script>
</body>
</html>อ้างอิงตามแอตทริบิวต์และคุณสมบัติ
อาร์กิวเมนต์ element (หรือ $(this) ภายในฟังก์ชัน) ช่วยให้คุณตรวจสอบคุณสมบัติ แอตทริบิวต์ หรือเนื้อหาข้อความขององค์ประกอบ DOM แต่ละรายการได้ จึงสามารถกรองได้อย่างเฉพาะเจาะจงมาก
ในตัวอย่างนี้ เราจะค้นหารายการทั้งหมดที่มีคำว่า "Important" อยู่ในข้อความ แล้วทำให้ข้อความเป็นตัวหนา
<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Task 1</li>
<li>Important Task 2</li>
<li>Task 3</li>
<li>Another Important Task 4</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the text content includes "Important"
return $(this).text().includes('Important');
}).css('font-weight', 'bold');
});
</script>
</body>
</html>การกรองข้อมูลแบบไดนามิก
แอตทริบิวต์ data ของ HTML5 (เช่น data-status="active") เหมาะสำหรับจัดเก็บข้อมูลเพิ่มเติมเฉพาะแอปพลิเคชันไว้โดยตรงในองค์ประกอบ คุณสามารถใช้ .filter() เพื่อเลือกองค์ประกอบตามค่าข้อมูลแบบกำหนดเองเหล่านี้ได้
มาลองเน้นรายการที่มีสถานะเป็น 'complete' โดยใช้แอตทริบิวต์ data-status
<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li data-status="pending">Task A</li>
<li data-status="complete">Task B</li>
<li data-status="pending">Task C</li>
<li data-status="complete">Task D</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check the 'data-status' attribute
return $(this).data('status') === 'complete';
}).css('text-decoration', 'line-through');
});
</script>
</body>
</html>กรองตามองค์ประกอบลูกหรือองค์ประกอบแม่
ฟังก์ชันกรองยังสามารถตรวจสอบความสัมพันธ์ระหว่างองค์ประกอบได้ด้วย ตัวอย่างเช่น คุณอาจต้องการเลือกองค์ประกอบแม่ที่มีองค์ประกอบลูกบางอย่าง หรือทำกลับกัน
ในที่นี้ เราจะค้นหารายการที่มีแท็ก <img> อยู่ภายใน แล้วเพิ่มเส้นขอบให้รายการเหล่านั้น
<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Text only</li>
<li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
<li>Another text item</li>
<li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the current <li> contains an <img>
return $(this).find('img').length > 0;
}).css('border', '2px solid orange');
});
</script>
</body>
</html>ตัวกรองที่ซับซ้อนด้วยตรรกะ
ภายในฟังก์ชันกรอง คุณสามารถรวมเงื่อนไขหลายรายการโดยใช้ตัวดำเนินการตรรกะมาตรฐานของ JavaScript เช่น && (AND) และ || (OR)
วิธีนี้ช่วยให้เลือกได้อย่างแม่นยำมากโดยอาศัยเกณฑ์หลายรายการพร้อมกัน ทำให้การกรองมีประสิทธิภาพสูง:
- องค์ประกอบมองเห็นได้หรือไม่ และมีคลาสที่ระบุหรือไม่
- มีข้อความ 'X' อยู่หรือไม่ หรือมีแอตทริบิวต์ data 'Y' หรือไม่
การกรองแบบไดนามิกในสถานการณ์จริง
มารวบรวมสิ่งที่เราเรียนรู้กัน ลองจินตนาการว่ากำลังกรองรายการสินค้าโดยใช้เกณฑ์หลายรายการ ฟังก์ชันกรองของคุณสามารถตรวจสอบหลายเงื่อนไขแบบไดนามิกได้
ตัวอย่างนี้จะเน้นสินค้าที่มองเห็นได้และอยู่ในหมวดหมู่ 'electronics' โดยใช้ตรรกะที่รวมกันภายในฟังก์ชันกรอง
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div class="product" data-category="electronics">Laptop</div>
<div class="product hidden" data-category="books">Novel</div>
<div class="product" data-category="electronics">Mouse</div>
<div class="product" data-category="books">Textbook</div>
<script>
$(document).ready(function(){
$('div.product').filter(function() {
// Filter products that are visible AND in 'electronics' category
var isVisible = $(this).is(':visible');
var isElectronics = $(this).data('category') === 'electronics';
return isVisible && isElectronics;
}).css('background-color', 'lightblue');
});
</script>
</body>
</html>โจทย์ท้าทาย: การกรอง
กำหนดให้มี HTML <li class="item special" data-value="10">...</li> ฟังก์ชัน .filter() ใดเลือกเฉพาะองค์ประกอบ <li> ที่มีคลาส .special และมีค่า data-value มากกว่า 5 ได้ถูกต้อง
ทบทวน: พลังของการกรองแบบไดนามิก
ตอนนี้คุณเชี่ยวชาญการใช้เมธอด .filter() ขั้นสูงของ jQuery แล้ว
- เมธอดนี้ปรับการเลือกที่มีอยู่ให้ละเอียดขึ้น ทำให้ควบคุมได้อย่างแม่นยำ
- การใช้ฟังก์ชันช่วยให้ใช้ตรรกะการกรองแบบไดนามิกและซับซ้อนได้
- คุณสามารถตรวจสอบดัชนี คุณสมบัติขององค์ประกอบ แอตทริบิวต์ data และความสัมพันธ์ระหว่างองค์ประกอบได้
- รวมเงื่อนไขหลายรายการด้วย
&&(AND) และ||(OR) เพื่อกำหนดเกณฑ์ที่เฉพาะเจาะจงมาก
เมธอดอันทรงพลังนี้ช่วยให้คุณสร้างส่วนติดต่อผู้ใช้ที่ตอบสนองได้ดีและขับเคลื่อนด้วยข้อมูล
คำถามที่พบบ่อย
บทเรียน “การกรองขั้นสูงด้วย .filter()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกรองขั้นสูงด้วย .filter()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกรองขั้นสูงด้วย .filter()”
สำรวจความสามารถทั้งหมดของเมธอด .filter() โดยใช้ฟังก์ชันเพื่อใช้ตรรกะแบบกำหนดเองและเลือกองค์ประกอบตามคุณสมบัติหรือความสัมพันธ์แบบไดนามิก คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “การกรองขั้นสูงด้วย .filter()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม
ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้างตัวเลือกคลาสเทียมแบบกำหนดเอง
- การกรองขั้นสูงด้วย .filter()
- การยกเว้นองค์ประกอบด้วย .not()