การกำหนด 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