filtering คือการกรอง ที่ใช้ตำแหน่งของ element เป็นฐานในการเลือก element ซึ่งประกอบไปด้วยเมธอดพื้นฐานดังนี้
- first() – เมธอดที่ใชในการค้นหา/เลือก element ที่เลือกในลำดับหรือตำแหน่งที่ 1 (เริ่มต้น แรกสุด)
- last() – เมธอดที่ใชในการค้นหา/เลือก element ที่เลือกในลำดับหรือตำแหน่งสุดท้าย ท้ายสุด
- eq() – เมธอดที่ใช้ในการเลือก/ค้นหา element ที่เลือกและระบุ index ของ element ที่เลือก
- filter() – เมธอดที่ใชในการกรอง โดยกำหนด class หรือ id ให้ักับ element
- not() – เมธอดค้นหาที่ใช้ในการกรองในลักษณะของการละเว้น element ที่ตรงกับที่กำหนด แต่จะส่งคืนค่าที่ไม่ตรงกลับไปแทน
1.first()
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").first().css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>This is a paragraph.</p> <div style="border: 1px solid black;"> <p>A paragraph in a div.</p> <p>Another paragraph in a div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> </body> </html>
ไฟล์ที่ 1 first()
จากไฟล์ที่ 1 เป็นการเลือก element <div> ที่อยู่ในตำแหน่งแรกสุด
2.last()
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").last().css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>This is a paragraph.</p> <div style="border: 1px solid black;"> <p>A paragraph in a div.</p> <p>Another paragraph in a div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> </body> </html>
ไฟล์ที่ 2 last()
จากไฟล์ที่ 2 เป็นการเลือก element <div> ที่อยู่ในตำแหน่งสุดท้าย ท้ายสุด
3.eq()
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").eq(2).css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald (index 0).</p> <p>Donald Duck (index 1).</p> <p>I live in Duckburg (index 2).</p> <p>My best friend is Mickey (index 3).</p> </body> </html>
ไฟล์ที่ 3 eq()
จากไฟล์ที่ 3 เป็นการเลือก element <p> ลำดับที่ 2
4.filter()
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Pawin.</p> <p class="intro">I live in Duckburg.</p> <p class="intro">I love Duckburg.</p> <p>My best friend is Mickey.</p> </body> </html>
ไฟล์ที่ 4 filter()
จากไฟล์ที่ 4 เป็นการค้นหาแบบกรองโดยใช้ class ที่กำหนดให้กับ element
5.not()
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").not(".intro").css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Pawin.</p> <p class="intro">I live in Duckburg.</p> <p class="intro">I love Duckburg.</p> <p>My best friend is Mickey.</p> </body> </html>
ไฟล์ที่ 5 not()
จากไฟล์ที่ 5 เป็นการค้นหาโดยใช้การกรองไว้ว่า ให้คืนค่าทุก element ที่ class ไม่เท่ากับ .intro
ตัวอย่างการสร้าง jQuery Filters
1.กรองตาราง (Filter Table)
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <h2>Filterable Table</h2> <p>กรอก name, lastname หรือ email เพื่อกรองข้อมูล:</p> <input id="myInput" type="text" placeholder="Search.."> <br><br> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>ไก่</td> <td>บ้าน</td> <td>[email protected]</td> </tr> <tr> <td>เป็ด</td> <td>บ้าน</td> <td>[email protected]</td> </tr> <tr> <td>ลิง</td> <td>เจี๊ยก</td> <td>[email protected]</td> </tr> <tr> <td>ม้า</td> <td>ลาย</td> <td>[email protected]</td> </tr> </tbody> </table> </body> </html>
ไฟล์ที่ 6 jquery_filter_table.php
ไฟล์ที่ 6 เป็นการกรองข้อมูลที่อยู่ในตารางโดยการกรอกข้อมูล ซึ่งจะใช้ toggle() เพื่อซ่อนเนื้อหาที่ไม่ตรงกับคำค้น display:none และใช้ toLowerCase() เพื่อให้สามารถใช้คำค้นที่เป็นตัวพิมพ์เล็กหรือใหญ่ก็ได้
ตัวอย่างที่ 2 กรองรายการ (Filter Lists)
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </head> <body> <h2>Filterable List</h2> <p>Type something in the input field to search the list for specific items:</p> <input id="myInput" type="text" placeholder="Search.."> <br> <ul id="myList"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth</li> </ul> </body> </html>
ไฟล์ที่ 7 jquery_filter_list.php
ตัวอย่างที่ 3 กรองอื่นๆ เช่น ปุ่ม ข้อความทั่วไป เป็นต้น
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myDIV *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </head> <body> <h2>Filter Anything</h2> <p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p> <input id="myInput" type="text" placeholder="Search.."> <div id="myDIV"> <p>I am a paragraph.</p> <div>I am a div element inside div.</div> <button>I am a button</button> <button>Another button</button> <p>Another paragraph.</p> </div> </body> </html>
ไฟล์ที่ 8 jquery_filter_other.php