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

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
selector ลำดับขั้น jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ selector ลำดับขั้น jquery



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



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ