อ้างอิงถึงโหนดแม่ และโหนดลูกได้แก่ parent(), parents(), parentsUntil(), children() เขียน HTML โหนดแม่ลูกง่ายๆเพื่อเอามาทดสอบดังนี้ครับ
GrandMother
+John(Father)
++ Daugter
++ Son
เขียนเป็น Code HTML ได้ดังนี้(Copy เอาไปใช้งานแล้วทดสอบได้เลยครับ)
<div id="GrandMother">
GrandMother
<br />
<div id="John">
+John(Father)
<br />
<div id="Daugter">
++ Daugter</div>
<div id="Son">
++ Son</div>
</div>
</div>
มาลองใช้กันดีกว่า
-
ถ้ารู้จัก Son แต่ไม่รู้จักพ่อของ Son สามารถทำความรู้จักผ่าน Son ได้โดยถาม Son ว่าพ่อแม่เป็นใคร ใน JQuery ใช้คำสั่ง parent()
$('#Son').parent(); ( Son พ่อชื่อไรวะ)
แน่นอนคำตอบจะได้ Object[div#John] ออกมาแน่นอน (Object ที่ดึงมาได้ประกอบด้วย div ที่มีไอดีชื่อว่า John) -
ถ้าอยากรู้จักโคตรเหง้าทั้งหมดเลยของ Son ละก็ใช้คำสั่ง parents()
$('#Son').parents(); (Son พ่อแม่พี่ปู่ย่าตายายมึงเป็นใครมั่งบอกกุให้หมดเลยนะ)
คำตอบที่ได้คือ Object[div#John, div#GrandMother,body, html] ได้โคตรเหง้ามาหมด จนถึง body และ html ซึ่งเป็น tag มาตรฐานในการเขียนเว็บด้วย HTML -
แต่ไม่เอาดีกว่า ฉันอยากรู้คือถึง พ่อของพ่อแกแค่นั้นแหละ Son ไม่ต้องออกอะไรกุมากมายนัก คนแก่ไม่อยากรู้แล้ว ให้ใช้คำสั่ง parentsUntil() แล้วใส่ค่าใน function ว่าต้องการให้หยุดถึงแค่ตรงไหน ในกรณีนี้ เราไม่อยากรู้จัก body ขึ้นไปและดังนั้นสามารถเขียนได้ดังนี้
$('#Son').parentsUntil('body');
คำตอบที่ได้คือ Object[div#John, div#GrandMother] วิธีนี้เป็นวิธีที่ดีในการหาโหนดพ่อแม่โดยไม่จำเป็นต้องดึงข้อมูลที่ไม่ต้องการมาทั้งหมด -
เบื่อกับการถาม Son แล้วคราวนี้มาลองถาม GrandMother ว่ามีลูกเป็นใครบ้างด้วยคำสั่ง Children()
$('#GrandMother').children()
ผลลัพธ์ที่ได้ Object[br, div#John] เนื่องจากเราใส่ tag br เข้าไปมันจึงถูกดึงมาด้วย เราจึงต้องกำหนดการถามลูกของ GrandMother ว่าเราจะเอาแค่ที่เป็น div นะ -
เขียนคำสั่งใหม่ เพื่อจะถาม GrandMother ว่าใครเป็นลูกบ้างโดยสนใจแค่ div พอคนนอกไม่เกี่ยว
$('#GrandMother').children('div')
คำตอบที่ได้ถือว่า โอเค Object[div#John]
สรุป function การเรียกอ้างอิงโหนดแม่ลูก
- parent([selector]) คือ การเรียกหาพ่อแม่ทั้งหมดของโหนดที่ต้องการ แต่จะเป็นโหนดพ่อแม่เท่านั้น โหนดยายปู่ต้นตระกูลไม่เกี่ยว ใน function สามารถใส่ selector เพื่อกำหนดเงื่อนไข selector ว่าต้องการพ่อแม่แบบไหนได้
- parents([selector]) คือ การเรียกหาโหนดต้นตระกูลพ่อแม่ปู่ย่าตายายทั้งหมดที่มี ใน function สามารถใส่ selector เพื่อกำหนดเงื่อนไข selector ว่าต้องการต้นตระกูลพ่อแม่ปู่ย่าตายายแบบไหน
- parentsUntil([selector]) คือ การเรียกหาโหนดต้นตระกูลพ่อแม่ปู่ย่าตายายทั้งหมด แต่สังเกตชื่อ function มีเขียนว่า Until นั้นหมายความว่าเราสามารถกำหนดได้ว่า ถ้าเจอ selector ตั้งแต่ตัวนี้ขึ้นไปเราไม่สนใจแล้ว(ใน function สามารถใส่ selector เพื่อกำหนดเงื่อนไข ไม่สนใจได้ด้วยเช่นกัน)
- children([selector]) คือ การเรียกหาลูกทั้งหมดของโหนดที่ต้องการ แต่จะเป็นโหนดลูกเท่านั้น โหนดหลานไม่เกี่ยว ใน function สามารถใส่ selector เพื่อกำหนดเงื่อนไข selector ว่าต้องการลูกแบบไหนได้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น