jQuery - DOM Traversing

jQuery เป็นเครื่องมือที่ทรงพลังมากซึ่งมีวิธีการส่งผ่าน DOM ที่หลากหลายเพื่อช่วยให้เราเลือกองค์ประกอบในเอกสารแบบสุ่มและในวิธีการตามลำดับ DOM Traversal Methods ส่วนใหญ่ไม่ได้ปรับเปลี่ยนอ็อบเจ็กต์ jQuery และใช้เพื่อกรององค์ประกอบออกจากเอกสารตามเงื่อนไขที่กำหนด

ค้นหาองค์ประกอบตามดัชนี

พิจารณาเอกสารง่ายๆที่มีเนื้อหา HTML ต่อไปนี้ -

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

  • ด้านบนทุกรายการมีดัชนีของตัวเองและสามารถระบุตำแหน่งได้โดยตรงโดยใช้ eq(index) วิธีการดังตัวอย่างด้านล่าง

  • ทุกองค์ประกอบย่อยเริ่มต้นดัชนีจากศูนย์ดังนั้นรายการ 2จะเข้าถึงได้โดยใช้$("li").eq(1) และอื่น ๆ

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่เพิ่มสีให้กับรายการที่สอง

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การกรององค์ประกอบออก

filter( selector )สามารถใช้วิธีการกรององค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับตัวเลือกที่ระบุ เลือกสามารถเขียนได้โดยใช้ไวยากรณ์เลือกใด ๆ

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่ใช้สีกับรายการที่เกี่ยวข้องกับชนชั้นกลาง -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ค้นหาองค์ประกอบลูกหลาน

find( selector )สามารถใช้วิธีการเพื่อค้นหาองค์ประกอบที่สืบทอดทั้งหมดขององค์ประกอบบางประเภท เลือกสามารถเขียนได้โดยใช้ไวยากรณ์เลือกใด ๆ

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เลือก <span> องค์ประกอบทั้งหมดที่มีอยู่ใน <p> องค์ประกอบต่างๆ -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการกรอง JQuery DOM

ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์ซึ่งคุณสามารถใช้เพื่อกรององค์ประกอบต่างๆออกจากรายการองค์ประกอบ DOM -

ซีเนียร์ วิธีการและคำอธิบาย
1 eq (ดัชนี)

ลดชุดขององค์ประกอบที่ตรงกันให้เหลือเพียงองค์ประกอบเดียว

2 ตัวกรอง (ตัวเลือก)

ลบองค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับตัวเลือกที่ระบุ

3 ตัวกรอง (fn)

ลบองค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับฟังก์ชันที่ระบุ

4 คือ (ตัวเลือก)

ตรวจสอบการเลือกปัจจุบันเทียบกับนิพจน์และส่งกลับค่าจริงหากองค์ประกอบของการเลือกอย่างน้อยหนึ่งรายการตรงกับตัวเลือกที่กำหนด

5 แผนที่ (โทรกลับ)

แปลชุดขององค์ประกอบในวัตถุ jQuery เป็นชุดของค่าอื่นในอาร์เรย์ jQuery (ซึ่งอาจมีหรือไม่มีองค์ประกอบก็ได้)

6 ไม่ (ตัวเลือก)

ลบองค์ประกอบที่ตรงกับตัวเลือกที่ระบุออกจากชุดขององค์ประกอบที่ตรงกัน

7 สไลซ์ (เริ่ม, [จบ])

เลือกส่วนย่อยขององค์ประกอบที่ตรงกัน

วิธีการข้าม JQuery DOM

ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์อื่น ๆ ซึ่งคุณสามารถใช้เพื่อค้นหาองค์ประกอบต่างๆใน DOM -

ซีเนียร์ วิธีการและคำอธิบาย
1 เพิ่ม (ตัวเลือก)

เพิ่มองค์ประกอบที่จับคู่โดยตัวเลือกที่กำหนดให้กับชุดขององค์ประกอบที่ตรงกัน

2 และตนเอง ()

เพิ่มการเลือกก่อนหน้าในการเลือกปัจจุบัน

3 เด็ก ๆ ([ตัวเลือก])

รับชุดขององค์ประกอบที่มีชายด์ที่ไม่ซ้ำกันทั้งหมดของชุดองค์ประกอบที่ตรงกัน

4 ใกล้เคียงที่สุด (ตัวเลือก)

รับชุดองค์ประกอบที่มีองค์ประกอบหลักที่ใกล้เคียงที่สุดซึ่งตรงกับตัวเลือกที่ระบุซึ่งรวมองค์ประกอบเริ่มต้น

5 เนื้อหา ()

ค้นหาโหนดลูกทั้งหมดภายในองค์ประกอบที่ตรงกัน (รวมถึงโหนดข้อความ) หรือเอกสารเนื้อหาหากองค์ประกอบนั้นเป็น iframe

6 จบ ()

เปลี่ยนกลับการดำเนินการ 'ทำลายล้าง' ล่าสุดโดยเปลี่ยนชุดขององค์ประกอบที่ตรงกันเป็นสถานะก่อนหน้า

7 ค้นหา (ตัวเลือก)

ค้นหาองค์ประกอบลูกหลานที่ตรงกับตัวเลือกที่ระบุ

8 ถัดไป ([ตัวเลือก])

รับชุดองค์ประกอบที่มีพี่น้องถัดไปที่ไม่ซ้ำกันของแต่ละชุดองค์ประกอบที่กำหนด

9 ถัดไปทั้งหมด ([ตัวเลือก])

ค้นหาองค์ประกอบพี่น้องทั้งหมดหลังองค์ประกอบปัจจุบัน

10 ชดเชยผู้ปกครอง ()

ส่งคืนคอลเล็กชัน jQuery ที่มีตำแหน่งแม่ขององค์ประกอบที่ตรงกันแรก

11 ผู้ปกครอง ([ตัวเลือก])

รับผู้ปกครองโดยตรงขององค์ประกอบ หากเรียกชุดขององค์ประกอบพาเรนต์จะส่งกลับชุดขององค์ประกอบหลักโดยตรงที่ไม่ซ้ำกัน

12 ผู้ปกครอง ([ตัวเลือก])

รับชุดองค์ประกอบที่มีบรรพบุรุษที่ไม่ซ้ำกันของชุดองค์ประกอบที่ตรงกัน (ยกเว้นองค์ประกอบราก)

13 ก่อนหน้า ([ตัวเลือก])

รับชุดองค์ประกอบที่มีพี่น้องก่อนหน้าที่ไม่ซ้ำกันของแต่ละชุดขององค์ประกอบที่ตรงกัน

14 ก่อนหน้าทั้งหมด ([ตัวเลือก])

ค้นหาองค์ประกอบพี่น้องทั้งหมดด้านหน้าองค์ประกอบปัจจุบัน

15 พี่น้อง ([ตัวเลือก])

รับชุดองค์ประกอบที่มีพี่น้องที่ไม่ซ้ำกันทั้งหมดของชุดองค์ประกอบที่ตรงกัน