การกำหนด selector แบบลำดับขั้นแบบที่ 1 $("ancestor descendant");
โดยที่ ancestor คือ selector ทั่วไป
descendant คือ selector ที่มีลำดับชั้นต่ำกว่า หรือ ลำดับขั้นที่สืบทอดจาก
ancestor ซึ่งมีลำดับขั้นที่สูงกว่า
ตัวอย่าง
1 2 3 4 5 | <script language="javascript">$(function(){ $("div p").css("backgroundColor","red"); });</script> |
จากโค้ดด้านบนอธิบายได้ว่า
div คือ selector ที่เป็น ancestor ส่วน p คือ selector ที่เป็น descendant ซึ่งหมาย
ความว่าแท็ก p ทุกตัวที่มีลำดับขั้นสืบทอดจาก div หรือลำดับขั้นต่ำกว่า div ให้มีสีพื้นหลัง
เป็นสีแดง เพื่อให้เห็นภาพชัดขึ้นจะอธิบายเพิ่มเติมต่อไปนี้
โค้ดตัวอย่าง
1 2 3 4 5 6 7 | <pre name="code" class="html:controls"> <div> <p>paragraph 1</p> <p>paragraph 2</p> </div> <p>paragraph 3</p></pre> |
จากโค้ด html ด้านบน เืมื่อเราใช้คำสั่ง jQuery จากโค้ดตัวแรก นั้นก็จะมีผลให้
แท็ก p ที่อยู่ใน div ทุกตัวมีพื้นหลังเป็นสีแดง ยกเว้นแท็ก p ตัวที่ 3 ที่ีมีข้อความ
ว่า paragraph 3
เพราะว่าอยู่ในลำดับขั้นเดียวกับ div จึงไม่เข้าเงื่อนไขตาม
ที่กำหนดในโค้ดแรก
การกำหนด selector แบบลำดับขั้นแบบที่ 2 $("parent > child");
โดยที่ parent คือ selector ทั่วไป
child คือ selector ที่มีลำดับชั้นต่ำกว่าอยู่ 1 ระดับขั้น
หรือ เป็นลำดับขั้นลูกของ parent
ตัวอย่าง
1 2 3 4 5 | <script language="javascript">$(function(){ $("div > p").css("backgroundColor","red"); });</script> |
จากโค้ดด้านบนอธิบายได้ว่า
div คือ selector ที่เป็น parent ส่วน p คือ selector ที่เป็น child ซึ่งหมาย
ความว่าแท็ก p ทุกตัวที่มีลำดับขั้นต่ำกว่า div อยู่ 1 ระดับขั้น หรือเป็นระดับขั้นลูกของ div ให้มีสีพื้นหลัง
เป็นสีแดง ซึ่งจะต่างจากรูปแบบที่ 1
โค้ดตัวอย่างเพิ่มเติม
1 2 3 4 5 6 7 | <div> <p>hello</p> <span> <p>good</p> <p>perfect</p> </span></div> |
จากโค้ด html ด้านบน เืมื่อเราใช้คำสั่ง jQueryการกำหนด selector แบบลำดับขั้นแบบที่ 2
นั้นก็จะมีผลให้
แท็ก p ทุกตัวที่อยู่ใน div และมีลำดับขั้นต่ำกว่า div 1 ระดับขั้น มีพื้นหลังเป็นสีแดง
คือแท็ก p ตัวแรก ส่วนแท็ก p ตัวที่สองและสามนั้นอยู่ใน div เหมือนกัน แต่ไม่มีผลเพราะว่า
แท็ก p ตัวที่สองและสามอยู่ในแท็ก span อีกทีหนึ่ง ซึ่งทำให้มีลำดับขั้นต่ำกว่าแท็ก div
ถึง 2 ระดับ จังไม่มีผล
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง