জেকুয়েরি next() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
next() মেথড নির্বাচিত এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে রিটার্ন করে।
সিবলিং এলিমেন্ট বলতে বুঝায় যাদের প্যারেন্ট এলিমেন্ট একই।
ডোম ট্রি: এই মেথড ডোম এলিমেন্টের পরবর্তী সিবলিং এলিমেন্ট পর্যন্ত যেতে পারে।
রিলেটেড মেথডসমূহ:
- nextAll() - নির্বাচিত এলিমেন্টের পরবর্তী সকল সিবলিং এলিমেন্টকে রিটার্ন করে
- nextUntil() - দুইটি আর্গুমেন্টের মধ্যবর্তী সকল সিবলিং এলিমেন্টকে রিটার্ন করে
সিনট্যাক্স ও ব্যাখ্যা
$(selector).detach()$(selector).next(filter)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে next() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| filter | ঐচ্ছিক। পরবর্তী সিবলিং খোজার কাজ সংক্ষিপ্ত করার জন্য একটি সিলেক্টর এক্সপ্রেশন নির্দেশ করে। |
next()মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে "start" ক্লাসযুক্ত প্রতিটি <li> এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে রিটার্ন করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.test * {
display: block;
border: 2px solid silver;
color: silver;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.start").next().css({"color": "orange", "border": "2px solid blue"});
});
</script>
</head>
<body>
<div style="width:500px;" class="test">
<ul>ul (প্যারেন্ট)
<li>li (সিবলিং)</li>
<li>li (সিবলিং)</li>
<li class="start">li ("start" ক্লাসযুক্ত সিবলিং)</li>
<li>li ("start" ক্লাসনেমযুক্ত li এর পরবর্তী সিবলিং)</li>
<li>li (সিবলিং)</li>
<li>li (সিবলিং)</li>
</ul>
</div>
</body>
</html>
ফলাফল
প্রতিটি <div> এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে সিলেক্ট
কিভাবে প্রতিটি <div> এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে সিলেক্ট করা যায় তা নিচের উদাহরনে দেখানো হলোঃ
উদাহরণঃ১
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").next().css("background-color", "aqua");
});
</script>
</head>
<body>
<h1>$("div").next() কি সিলেক্ট করবে?</h1>
<div style="border:2px solid black;padding:10px;">This is a div element.</div>
<p> এই p এলিমেন্ট টি ব একটি div এলিমেন্টের পরবর্তী সিবলিং এলিমেন্ট.</p>
<p>এটি অন্য একটি p এলিমেন্ট.</p>
<div style="border:2px solid black;padding:10px;">
<p> এটি ডিভ এলি্মেন্টের ভিতরে একটি p এলিমেন্ট</p>
</div>
<h2>এই হেডিং টি একটি ডিভ এলিমেন্টের পরবর্তী সিবলিং এলিমেন্ট </h2>
<p> এটি একটি p এলিমেন্ট</p>
</body>
</html>
ফলাফল
সার্চ সংক্ষিপ্তকরণ
কিভাবে প্রতিটি <div> এলিমেন্টের পরবর্তী সিবলিং <p> এলিমেন্টকে সিলেক্ট করতে পারি তা নিচের উদাহরনে দেখানো হলোঃ
উদাহরণঃ২
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").next("p").css("background-color", "aqua");
});
</script>
</head>
<body>
<h1> $("div").next("p")সিলেক্ট হবে কি?</h1>
<div style="border:2px solid black;padding:10px;">এটি একটি ডিভ এলিমেন্ট।</div>
<p>এই p উপাদানটি একটি div উপাদানের পরবর্তী সহোদর উপাদান।</p>
<p>এটি অন্য একটি p এলিমেন্ট</p>
<div style="border:2px solid black;padding:10px;">
<p>একটি div উপাদানের ভিতরে একটি p উপাদান।</p>
</div>
<h2> এটি একটি হেডার, এবং ডিভ এলিমেন্টটি এর পরবর্তী সহোদর উপাদান।</h2>
<p>এটি একটি p এলিমেন্ট ( এই p এলিমেন্টটি সিলেক্ট হবে না, কারন h2 উপাদান উপরে div উপাদান এর "next" উপাদানের সহোদর উপাদান । যাইহোক আপনি যদি h2 উপাদানটি মুছতে চান, এই প্যারাগ্রাফটি পরবর্তীতে আরেকটি ডিভ এলিমেন্টের "next"এলিমেন্টের সহোদর এলিমেন্ট হবে , এই এলিমেন্টে যে ফলাফল পাওয়া যাবে তা নিজে থাকেই সিলেক্ট হয়ে যাবে)।</p>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ