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

การกำหนด selector แบบลำดับขั้นแบบที่ 1 $("ancestor descendant");

โดยที่ ancestor คือ selector ทั่วไป
descendant คือ selector ที่มีลำดับชั้นต่ำกว่า หรือ ลำดับขั้นที่สืบทอดจาก
ancestor ซึ่งมีลำดับขั้นที่สูงกว่า
ตัวอย่าง

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

จากโค้ดด้านบนอธิบายได้ว่า
div คือ selector ที่เป็น ancestor ส่วน p คือ selector ที่เป็น descendant ซึ่งหมาย
ความว่าแท็ก p ทุกตัวที่มีลำดับขั้นสืบทอดจาก div หรือลำดับขั้นต่ำกว่า div ให้มีสีพื้นหลัง
เป็นสีแดง เพื่อให้เห็นภาพชัดขึ้นจะอธิบายเพิ่มเติมต่อไปนี้

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

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

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

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

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

<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 ระดับ จังไม่มีผล