জেকুয়েরি element + next সিলেক্টর
সংজ্ঞা এবং ব্যবহার
("element + next") সিলেক্টরের মাধ্যমে কোন একটি নির্দিষ্ট এলিমেন্টের পরের এলিমেন্টকে সিলেক্ট করা হয়। "next" এলিমেন্টটি অবশ্যই নির্দিষ্ট এলিমেন্টের পরের এলিমেন্ট হতে হবে।
উদাহরণঃ যদি আপনি <h3> এলিমেন্টের পরবর্তী <p> এলিমেন্টকে সিলেক্ট করতে চান, তাহলে এই সিনট্যাক্স ব্যবহার করুনঃ
$("h3 + p")
সিনট্যাক্স
$("element + next")
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে element + next সিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারমিটার | বিবরণ |
|---|---|
| element | আবশ্যক। যেকোন ভ্যালিড জেকুয়েরি সিলেক্টর। |
| next | আবশ্যক। ঐ এলিমেন্টটিকে নির্দিষ্ট করুন যেটি element প্যারমিটারের next এলিমেন্ট। |
element + next সিলেক্টর সংক্রান্ত উদাহরণ
<h3> এলিমেন্টের পরের <p> এলিমেন্টকে সিলেক্ট
নিচের উদাহরণে element + next সিলেক্টরের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি element + next সিলেক্ট</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h3 + p").css({
"background-color": "green",
"color": "white",
});
});
</script>
</head>
<body>
<h3>$("h3 + p") কি সিলেক্ট করবে?</h3>
<p>এই প্যারাগ্রাফটি সিলেক্ট হবে। কারন এটি <h3> এলিমেন্টের পরবর্তী <p> এলিমেন্ট।</p>
<p>এই প্যারাগ্রাফটি সিলেক্ট হবে না। কারণ এটি <h3> এলিমেন্টের পরবর্তী <p> এলিমেন্ট নয়।</p>
<div style="border:1px solid teal;">
<h3>এটি <h3> এলিমেন্ট।</h3>
<p>এই প্যারাগ্রাফটি সিলেক্ট হবে। কারণ এটি <h3> এলিমেন্টের পরবর্তী <p> এলিমেন্ট।</p>
<p></p>
</div>
<br>
<div style="border:1px solid red;">
<h3>এটি <h3> এলিমেন্ট।</h3>
<div>এটি <div> এলিমেন্ট।</div>
<p>এই প্যারাগ্রাফটি সিলেক্ট হবে না। কারণ এটি <h3> এলিমেন্টের পরবর্তী <p> এলিমেন্ট নয়।</p>
</div>
</body>
</html>
ফলাফল