การกำหนด selector แบบลำดับขั้นแบบที่ 3 $("prev + next ");
โดยที่ prev คือ selector ทั่วไป
next คือ selector ตัวแรกที่อยู่ถัดจาก prev และอยู่ในลำดับขั้นเดียวกัน
ตัวอย่าง
1 2 3 4 5 | <script language="javascript">$(function(){ $("div + span").css("backgroundColor","red"); });</script> |
จากโค้ดด้านบนอธิบายได้ว่า
div คือ selector ที่เป็น prev ส่วน span คือ selector ที่เป็น next ซึ่งหมาย
ความว่าแท็ก span ตัวแรกที่อยู่ถัดไปจาก div และมีลำดับขั้นเดียวกันกับ div จะมีพื้น
หลังเป็นสีแดง
โค้ดตัวอย่าง
1 2 3 4 5 6 7 8 | <div> <p>hello</p> <span> <p>good</p> <p>perfect</p> </span></div><span>smart</span> |
จากโค้ด html ด้านบน เืมื่อเราใช้คำสั่ง jQuery จากสคริปก่อนหน้า นั้นก็จะมีผลให้
แท็ก span ที่อยู่ถัดจาก div และมีลำดับขั้นเดียวกับ div ซึ่งก็คือ span ที่มีข้อความ
ว่า smart ก็จะมีพื้นหลังเป็นสีึแดง
การกำหนด selector แบบลำดับขั้นแบบที่ 4 $("prev ~ siblings ");
โดยที่ prev คือ selector ทั่วไป
siblings คือ selector ทุกตัวที่อยู่ถัดจาก prev และมีลำดับขั้นเดียวกับ prev
ตัวอย่าง
1 2 3 4 5 | <script language="javascript">$(function(){ $("div ~ span").css("backgroundColor","red"); });</script> |
จากโค้ดด้านบนอธิบายได้ว่า
div คือ selector ที่เป็น prev ส่วน span คือ selector ที่เป็น siblings ซึ่งหมาย
ความว่าแท็ก span ทุกตัวอยู่ถัดจาก prev และมีลำดับขั้นเดียวกัน จะมีสีพื้นหลัง
เป็นสีแดง
โค้ดตัวอย่างเพิ่มเติม
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span>really</span><div> <p>hello</p> <span> <p>good</p> <p>perfect</p> </span></div><span>smart</span><span>yes</span> <div> <span>ok man</span></div> |
จากโค้ด html ด้านบน เืมื่อเราใช้คำสั่ง jQueryการกำหนด selector แบบลำดับขั้นแบบที่ 4
นั้นก็จะมีผลให้
แท็ก span ทุกตัวที่อยู่ถัดจาก div และมีลำดับขั้นเดียวกันมีพื้นหลังเป็นสีแดง
คือแท็ก span ที่มีข้อความว่า smart และแท็ก span ที่มีข้อความว่า yes
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง