jQuery find():คำแนะนำทีละขั้นตอน

jQuery find() วิธีอาจฟังดูคุ้นเคย แต่อย่าสับสนกับวิธี JavaScript find()! พวกเขาทั้งคู่ "หา" สิ่งต่าง ๆ แต่สิ่งที่พวกเขากลับมานั้นแตกต่างกันมาก ใน JavaScript find() เมธอดสามารถเรียกได้เฉพาะในอาร์เรย์เท่านั้น

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

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

การใช้ jQuery find()

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

มาเริ่มง่ายๆ และเพิ่มความซับซ้อนในหัวข้อต่อไป เราสามารถจัดการองค์ประกอบหลังจากโหลดหน้าเพื่อแสดงให้เห็นว่า find() ทำงาน เราจะเปลี่ยนสีของคำบางคำในบริบทของย่อหน้าเมื่อหน้าโหลดขึ้นมาได้อย่างไร เราจะเริ่มต้นที่นี่:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
jQuery find() method example
</h2>
  <p>
  This is an example paragraph. 
  </p>
  <p>We are going to change the color <span>blue</span> to the color blue.</p>
<div class="green">We are going to change the word <span>green</span> to the color green.</div> 
<p>
Every other will word will stay the same. 
</p>

</div>

ดูโค้ดนี้แล้วคุณจะสังเกตเห็นว่าภายในองค์ประกอบ

เป็นองค์ประกอบ บางส่วน องค์ประกอบ รายการหนึ่งเป็นลูกขององค์ประกอบ

อีกอันหนึ่งเป็นลูกของ

ที่มีคลาสสีเขียว ตามที่ระบุในย่อหน้า เราจะเปลี่ยนสีของคำที่อยู่ใน เท่านั้น ตรวจสอบให้แน่ใจว่า HTML ของเรากำลังแสดงผลก่อนที่เราจะทำเช่นนั้น:

HTML ของเรากำลังแสดงผล ตอนนี้เราจะเปลี่ยนสีข้อความเพื่อแสดง find() ในการดำเนินการ นี่เป็นขั้นตอนที่ดีสำหรับผู้เริ่มต้น เนื่องจากเราจำเป็นต้องเปลี่ยนแอตทริบิวต์ CSS เพียงรายการเดียวเพื่อให้บรรลุเป้าหมายนี้ ขณะส่งองค์ประกอบ

เป็นตัวเลือกของเราไปยัง find() เราสามารถใช้ css() . ของ jQuery วิธีการแสดงการเปลี่ยนสี:

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
 
</script>

ในการใช้งานครั้งแรกของ find() เรากำลังเลือกองค์ประกอบ

ทั้งหมด เราใช้ find() เพื่อค้นหาองค์ประกอบ ที่เป็นลูกของ

ในตัวอย่างนี้ เป็นเพียงคำว่าสีน้ำเงิน จากนั้นเราใช้ css() วิธีการเปลี่ยนสีเป็นสีน้ำเงิน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ต่อการใช้งานครั้งที่สองของ find() . คราวนี้เราจะเลือก

ที่มีคลาสสีเขียวและเรียก find() เกี่ยวกับมัน เมธอดกำลังค้นหาองค์ประกอบ อื่นที่เป็นลูกของ

นี่เป็นเพียงคำว่าสีเขียวเท่านั้น เช่นเดียวกับบรรทัดแรก เรากำลังใช้ css() วิธีการเปลี่ยนสีเป็นสีเขียว

เรียกใช้และดูว่าเกิดอะไรขึ้น!

สังเกตว่าทั้งคำสีน้ำเงินและสีเขียวถูกห่อด้วยองค์ประกอบ span โดยไม่มีการกำหนดคลาสหรือ id เรายังสามารถแยกคำเหล่านั้นและเปลี่ยนสีได้ อย่างที่คุณอาจเดาได้ เป็นเพราะองค์ประกอบหลักของ ต่างกัน

คือพาเรนต์ของ ของคำว่า blue

คือพาเรนต์ของ ที่มีคำว่า green

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

jQuery find() ในรายการ

ในตัวอย่างนี้ เรามีรายการสิ่งที่ต้องทำ เรามีสิ่งที่ต้องทำในวันนี้ แต่เราต้องซื้อของที่ร้านเพื่อทำ เมื่อเราซื้อสินค้าเหล่านี้แล้ว เราก็สามารถทำเครื่องหมายออกจากรายการและเริ่มต้นวันของเราได้! นี่คือรายการของเรา:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
  <li class="store">Go to the store
    <ul>
      <li>Trash bags</li>
      <li>Dish Soap</li>
    </ul>
  </li>
  <li>Take out the trash</li>
  <Li>Wash the dishes</Li>
</ul>
</div>

ที่นี่เรามีรายการของเรา เรามีองค์ประกอบ

ของ "ไปที่ร้าน" "ทิ้งขยะ" และ "ล้างจาน" ในฐานะลูกขององค์ประกอบ

ซึ่งเป็นลูกของ
ที่มีรหัส ของ "หลัก" ในรายการ "ไปที่ร้านค้า" เรามีของต้องซื้อที่ร้านค้า เราต้องการถุงขยะและน้ำยาล้างจานเพื่อทำงานบ้านให้เสร็จในวันนี้ เราได้ใส่ไว้ในรายการย่อยใน
ด้วยคลาสของร้านค้า


ตอนนี้เราสามารถทำเครื่องหมายรายการเหล่านี้ออกจากรายการหลังจากที่เราซื้อแล้ว:
<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>
เราสามารถขีดฆ่าเฉพาะรายการเหล่านั้นในรายการของเราโดยเลือก
ที่มีคลาสของร้านค้าและใช้ find() เพื่อค้นหาองค์ประกอบ
ลูก อีกครั้ง เรากำลังใช้ jQuery css() วิธีการใช้ค่า "line-through" กับแอตทริบิวต์ของ "text-decoration" การทำเช่นนั้นจะทำให้รายการที่เลือกมีเส้นผ่าน:


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

ความสามารถในการแยกความแตกต่างขององค์ประกอบย่อยที่จะเลือกทำให้เราเป็นแบบทั่วไปและเปลี่ยนทั้งส่วนของหน้า หรือเฉพาะและเปลี่ยนองค์ประกอบบางอย่างของหน้าเท่านั้น อยู่ในความยืดหยุ่นนี้ที่ find() ทำให้ตัวเองมีประโยชน์มากที่สุด

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเรียนรู้ jQuery ที่นี่