jQuery วนลูป - วิธีเรียกใช้ children()

jQuery ละเมิดเอกสารอ้างอิง

ตัวอย่าง

หาลูกของ div ที่มีชื่อคลาส "selected" และตั้งค่าเป็นสีส้มม่วง：

$("div").children(".selected").css("color", "blue");

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

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

วิธี .children() คืนตัวเลือกทั้งหมดขององค์ประกอบที่ตรงกันตรงข้ามขององค์ประกอบที่เลือก

การใช้งาน

.children(selector)
ตัวเลือก คำอธิบาย
selector ตัวแสดงความหมายตัวเลือกของตัวแสดงความหมายตัวเลือกที่มีความตรงกันตรงข้าม

รายละเอียด

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

โปรดสังเกตว่า อย่างเดียวกับหลายวิธี jQuery ส่วนใหญ่ .children() ไม่ได้คืนตัวเลือกของเนื้อหา ถ้าต้องการได้ตัวเลือกทั้งหมดที่มีเนื้อหาและหมายเหตุ ใช้ .contents()

วิธีนี้รับตัวแสดงความหมายตัวเลือกเป็นตัวเลือกที่เป็นตัวแสดงความหมายตัวเลือก ซึ่งมีรูปแบบเดียวกับตัวเลือกที่เราส่งไปยัง $() ถ้าใช้ตัวแสดงความหมายตัวเลือก มันจะทดสอบว่าองค์ประกอบอะไรนั้นตรงกันตรงข้ามกับตัวแสดงความหมายตัวเลือกนั้นเพื่อเซลเฟตระหว่างเนื้อหา

คิดถึงเว็บเพจนี้ที่มีลิสต์ที่ฝังกลางซึ่งมีฐานข้อมูล

<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>

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

ถ้าเราเริ่มจากลิสต์ level-2 พวกเราสามารถหาฝายของมันได้:

$('ul.level-2').children().css('background-color', 'red');

ผลลัพธ์ของบรรทัดนี้คือ โครงการ A, B, C จะได้มีสีหลังแดง ตามเนื่องจากเราไม่ได้ใช้ตัวแสดงความหมายตัวเลือก จึงมี jQuery ที่ยกเลิกมีเนื้อหาทั้งหมดของลูกโครงการ ถ้าใช้ตัวแสดงความหมายตัวเลือก มันจะเรียกเฉพาะโครงการที่ตรงกันตรงข้าม

jQuery ละเมิดเอกสารอ้างอิง