jQuery ทำงานต่อ - ฟังก์ชัน find()

jQuery ปฏิบัติตามคู่มือเลือกวิธี

ตัวอย่าง

ค้นหาหลักฐาน span ที่อยู่ในหลักฐาน p ทุกตัวและเปลี่ยนสีของมันเป็นแดง

$("p").find("span").css('color','red');

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

คำหมายและวิธีใช้

ฟังก์ชัน find() ของค่าองค์ประกอบปัจจุบันได้หลักฐานทุกองค์ประกอบ โดยใช้ตัวแสดง ตัวแปร jQuery หรือองค์ประกอบเพื่อกรอง

การใช้งาน

.find(selector)
ตัวแปร คำอธิบาย
selector ตัวเลขศัพท์ มีตัวแสดงที่ใช้เพื่อตรวจสอบว่าองค์ประกอบปัจจุบันตรงกับตัวแสดงนี้หรือไม่

รายละเอียด

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

.find() มีลักษณะเห็นได้ชัดแรกคือ มันรับตัวแสดงเลือกเดียวกับประเภทของตัวแสดงที่เราส่งไปยังฟังก์ชัน $(). จะเซ็นทร์ทำการกรององค์ประกอบด้วยการตรวจสอบว่ามันตรงกับตัวแสดงนี้หรือไม่

โปรดคิดจัดสินด้วยความรู้สึกของคุณที่ด้านล่างนี้ ซึ่งเป็นรายการเลขาธิการที่แน่นน้อย

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

เราจะเริ่มจากลำดับ II แล้วหาองค์ประกอบในลำดับของมัน:

$('li.item-ii').find('li').css('background-color', 'red');

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

ผลลัพธ์ของการสำรวจครั้งนี้คือโครงการ A, B, 1, 2, 3 และ C ถูกตั้งค่าสีหลังแบบแดงเสมอ; แม้ว่าโครงการ II จะตรงกับตัวเลือก มันก็จะไม่ถูกเชื่อมโยงรวมอยู่ในผลลัพธ์; มีการตรวจสอบเฉพาะหลังผู้บุตรเท่านั้น

ต่างจากวิธีเลือกต้นไม้ที่อื่น ในวิธี .find() คำแสดงตัวเลือกคือต้องใช้ตัวเรียกค่า: หากพวกเราต้องการกลับค่าของทุกหลังผู้บุตร สามารถส่งมอบตัวเลือก wildcard '*' ได้

โครงการเลือก selector คือสิ่งที่ถูกปฏิบัติโดยวิธี .find(); ดังนั้น $('li.item-ii').find('li') เท่ากับ ('li', 'li.item-ii')

สำหรับ jQuery 1.6 นั้น พวกเรายังสามารถใช้ jQuery ชุดหรือองค์ประกอบที่ให้ไว้เพื่อการกรองได้: ยังคงเป็นลำดับรอยรับที่เดิมนี้ พวกเราเขียนดังนี้ก่อน:

var $allListElements = $('li');

หลังจากนั้น ส่งผล jQuery องค์ประกอบให้กับวิธี find():

$('li.item-ii').find( $allListElements );

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

รหัสด้านบนจะกลับค่า jQuery ชุดที่มีองค์ประกอบจากลำดับ II หลังผู้บุตร

ตามเดียวกัน ก็สามารถส่งมอบองค์ประกอบได้

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

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

ผลลัพธ์การเรียกใช้ครั้งนี้คือโครงการ 1 ถูกตั้งค่าสีหลังแบบแดง

jQuery ปฏิบัติตามคู่มือเลือกวิธี