การกำหนด selectors ด้วย jQuery แบบลำดับขั้น ตอนที่ 2

การกำหนด selector แบบลำดับขั้นแบบที่ 3 $("prev + next ");

โดยที่ prev คือ selector ทั่วไป
next คือ selector ตัวแรกที่อยู่ถัดจาก prev และอยู่ในลำดับขั้นเดียวกัน
ตัวอย่าง

<script language="javascript">
$(function(){
	$("div + span").css("backgroundColor","red");  
});
</script>

จากโค้ดด้านบนอธิบายได้ว่า
div คือ selector ที่เป็น prev ส่วน span คือ selector ที่เป็น next ซึ่งหมาย
ความว่าแท็ก span ตัวแรกที่อยู่ถัดไปจาก div และมีลำดับขั้นเดียวกันกับ div จะมีพื้น
หลังเป็นสีแดง

โค้ดตัวอย่าง

<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
ตัวอย่าง

<script language="javascript">
$(function(){
	$("div ~ span").css("backgroundColor","red");  
});
</script>

จากโค้ดด้านบนอธิบายได้ว่า
div คือ selector ที่เป็น prev ส่วน span คือ selector ที่เป็น siblings ซึ่งหมาย
ความว่าแท็ก span ทุกตัวอยู่ถัดจาก prev และมีลำดับขั้นเดียวกัน จะมีสีพื้นหลัง
เป็นสีแดง

โค้ดตัวอย่างเพิ่มเติม

<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