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

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

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

ดูแล้ว 11,097 ครั้ง


การกำหนด 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 สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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