การกำหนด Selector ใน jQuery นอกจากจะกำหนดเป็น class หรือ id แล้วเราสามารถกำหนดในรูปแบบเจาะจงได้ว่าเราต้องการ element หรือองค์ประกอบไหนทำงาน โดยการใช้ selector (“ element + next”) เพื่อสามารถลดการใช้การคลาสหรือไอดีได้
selector (“ element + next”) เป็น jQuery ที่ใช้เพื่อเลือกองค์ประกอบ( HTML Element)ที่อยู่“ ถัดไป”จาก"องค์ประกอบที่ระบุ" ตัวเลือกนี้จะทำงานเฉพาะเมื่อองค์ประกอบ"ถัดไป"ถูกวางไว้หลังองค์ประกอบที่ระบุเท่านั้น
ตัวอย่างเช่น:
- หากคำสั่งคือ
$(“ div + p”)สิ่งนี้จะเลือกเฉพาะองค์ประกอบ“p” ตัวแรกซึ่งที่อยู่ถัดจาก“div” และองค์ประกอบ“p”อื่น ๆจะถูกละเว้น - แต่ถ้าคำสั่งคือ
$(“ div + p”)และ“h1”อยู่ระหว่างองค์ประกอบ“div”และ“p”ที่เลือกตัวเลือกนี้จะไม่ทำงานและองค์ประกอบ"p"จะไม่มีผล
มี syntex ดังนี้
$("element + next")Return Value:จะคืนองค์ประกอบที่เลือกพร้อมการเปลี่ยนแปลงที่ระบุ
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("div + p").css("background-color","lightgreen");
});
</script>
<style>
body {
width: 80%;
height: 40%;
padding: 10px;
border: 2px solid green;
font-size: 20px;
}
div {
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div>Welcme to Mindphp.!</div>
<p>This is first paragraph element.</p>
<p>This is second paragraph element.</p>
</body>
</html>
จากตัวอย่างโค้ดในส่วนของ script ได้กำหนดไว้ดังนี้ $("div + p").css("background-color","lightgreen"); คือให้เลือก องค์ประกอบ“ p” ที่อยู่ถัดจาก "div" และกำหนดพื้นหลังให้เป็นสีเขียนอ่อน และผลลัพธ์ก็จะเป็นดังนี้
ตัวอย่างที่สอง
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div + p").css("background-color","lightgreen");
});
});
</script>
<style>
body {
width: 80%;
height: 40%;
padding: 10px;
border: 2px solid green;
font-size: 20px;
}
div {
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div>Welcme to Mindphp!</div>
<h1>Heading element is here.</h1>
<p>This is first paragraph element.</p>
<p>This is second paragraph element.</p>
<button>Submit</button>
</body>
</html>
จากตัวอย่างที่สองโค้ดในส่วนของ script ได้กำหนดไว้ยังเหมือนเดิม $("div + p").css("background-color","lightgreen"); แต่เพิ่มปุ่มมาผลลัพธ์ก็จะเป็นดังนี้
จากผลลัพธ์เมื่อกดปุ่มแล้วให้เลือก องค์ประกอบ“ p” ที่อยู่ถัดจาก "div" และกำหนดพื้นหลังให้เป็นสีเขียนอ่อน แต่ในโค้ด element ถัดจาก div ไม่ใช่ "p"ด้วยนี่ซิ มันคือ "h1" แล้วค่อยมา "p" ดังนี้น element "p"ก็จะไม่มีอะไรเกิดขึ้น พื้นหลังไม่เปลี่ยนแปลง
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery
