jQuery การวนลูป - วิธี parents()

jQuery นำทางเทคนิคทางการเดินทาง

ตัวอย่าง

ค้นหาบิดาของแต่ละองค์ประกอบ b

$("b").parents()

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

การระบุและการใช้งาน

parents() ได้รับองค์ประกอบที่เป็นบิดาของแต่ละองค์ประกอบในชุดตัวแทนที่ตรงกับที่ระบุโดยเลือกเล็กน้อย การใช้เลือกเล็กน้อยเป็นที่เลือกตั้ง

.parents()selector)
ตัวแปล รายละเอียด
selector ตัวเลขสายต่อเนื่อง มีประโยคเลือกเลือกรายการที่ใช้เพื่อตรวจสอบองค์ประกอบ

รายละเอียด

หากให้ความหมายกับ jQuery แบบตัวเลือกเป็นชุดแสงองค์ประกอบ DOM วิธี .parents() สามารถหาองค์ประกอบบุตรขององค์ประกอบเหล่านี้ในต้นไม้ DOM และทำให้ชุดแสงองค์ประกอบใหม่ด้วยองค์ประกอบที่ตรงกับประโยคเลือกเลือกรายการ ซึ่งตรงกับองค์ประกอบบุตรขององค์ประกอบเดิมที่เรียกเลขแรก .parents() และ .parent() วิธีนี้เหมือนกัน แต่แตกต่างกันที่วิธีนี้เดินทางขึ้นต้นไม้ DOM ตามระดับเดียว

วิธีนี้ยอมรับประโยคเลือกเลือกรายการที่เป็นตัวเลือก ซึ่งมีลักษณะเดียวกับประโยคที่เราส่งมายังฟังก์ชัน $() ถ้าใช้ประโยคเลือกเลือกรายการนี้ จะทำการเลือกรายการด้วยการตรวจสอบว่าองค์ประกอบตรงกับประโยคเลือกเลือกรายการ

คิดถึงเว็บปลายทางนี้ที่มีรายการเล็กๆที่มีรูปแบบซับซ้อน

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

หากเราเริ่มจากรายการ A สามารถหาองค์ประกอบบุตรของมันได้

$('li.item-a').parents().css('background-color', 'red');

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

ผลลัพธ์การเรียกใช้ครั้งนี้คือเปิดแผงหลังสีแดงสำหรับองค์ประกอบเช่นรายการระดับ-2 รายการ II และรายการระดับ-1 และอื่น ๆ (ผ่านต้นไม้ DOM จนถึง <html>) ด้วยเหตุผลที่ว่าเราไม่ได้ใช้ประโยคเลือกเลือกรายการ ตัวเลือกเองจึงกลายเป็นส่วนหนึ่งของตัวแปล หากได้ใช้ประโยคเลือกเลือกรายการ จะตรวจสอบว่าองค์ประกอบนั้นตรงกับประโยคเลือกเลือกรายการก่อนที่จะมีองค์ประกอบที่มีอยู่ ด้วยเหตุผลที่ว่าเราไม่ได้ใช้ประโยคเลือกเลือกรายการ ทุกองค์ประกอบที่เป็นบุตรขององค์ประกอบเป็นส่วนหนึ่งของตัวแปล jQuery หากได้ใช้ประโยคเลือกเลือกรายการ จะมีเพียงแค่รายการที่ตรงกับประโยคเลือกเลือกรายการ

jQuery นำทางเทคนิคทางการเดินทาง