জেকুয়েরি nextAll() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
nextAll() মেথড নির্বাচিত এলিমেন্টের পরবর্তী সকল সিবলিং এলিমেন্টকে রিটার্ন করে।
সিবলিং এলিমেন্ট বলতে বুঝায় যাদের প্যারেন্ট এলিমেন্ট একই।
ডোম ট্রি: এই মেথড ডোম এলিমেন্টের পরবর্তী সিবলিং এলিমেন্ট পর্যন্ত যেতে পারে।
রিলেটেড মেথডসমূহ:
- next() - নির্বাচিত এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে রিটার্ন করে
- nextUntil() - দুইটি আর্গুমেন্টের মধ্যবর্তী সকল সিবলিং এলিমেন্টকে রিটার্ন করে
সিনট্যাক্স ও ব্যাখ্যা
$(selector).detach()$(selector).nextAll(filter)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে nextAll() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| filter | ঐচ্ছিক। পরবর্তী সিবলিং সার্চ করার কাজ সংক্ষিপ্ত করার জন্য একটি সিলেক্টর এক্সপ্রেশন নির্দেশ করে নোট: একাধিক সিবলিং রিটার্ন করতে, প্রতিটি এক্সপ্রেশনকে কমার(,) সাহায্যে আলাদা করতে হয়। |
nextAll()মেথড সংক্রান্ত উদাহরণ
"start" ক্লাসযুক্ত প্রতিটি <li> এলিমেন্টের পরবর্তী সকল সিবলিং এলিমেন্টগুলোকে রিটার্ন করে তা নিচের উদাহরেন দেখান হলোঃ
উদাহরণ
<!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(){
$("li.start").nextAll().css({"color": "green", "border": "2px solid blue"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (প্যারেন্ট)
<li>li (সিবলিং)</li>
<li>li (সিবলিং)</li>
<li class="start">li ("start" ক্লাসযুক্ত সিবলিং)</li>
<li>li ("start" ক্লাসে li এর সিবলিং)</li>
<li>li ("start" ক্লাসে li এর সিবলিং)</li>
<li>li ("start" ক্লাসে li এর সিবলিং)</li>
</ul>
</div>
<p>এই উদাহরণে, আমরা "start" ক্লাসের সাথে li এর পরবর্তী sibling এর সকল এলিমেন্ট রিটার্ন করেছি।</p>
</body>
</html>
ফলাফল
সার্চ সংক্ষিপ্তকরণ
কিভাবে পরবর্তী সিবলিং এলিমেন্টের সার্চকে ফিল্টার করা যায় তা নিচের উদাহরেন দেখান হলোঃ
উদাহরণঃ১
<!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(){
$("li.start").nextAll(".first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (sibling)</li>
<li>li (sibling)</li>
<li class="start">li ("start" ক্লাসের সাথে sibling)</li>
<li class="first">li ("start" ক্লাসের সাথে li এর পরবর্তী sibling)</li>
<li>li ("start" ক্লাসের সাথে li এর পরবর্তী sibling)</li>
<li class="first">li ("start" ক্লাসের সাথে li এর পরবর্তী sibling)</li>
</ul>
</div>
<p>উদাহরণে, আমরা শুধুমাত্র "first" ক্লাস যুক্ত এলিমেন্টগুলোকে রিটার্ন করেছি, যেটি "start" ক্লাস যুক্ত li এলিমেন্টের পরবর্তী sibling (সহোদর) এলিমেন্ট।</p>
</body>
</html>
ফলাফল
একাধিক সিবলিং রিটার্ন
কিভাবে filter প্যারামিটার ব্যবহার করে <h2> এলিমেন্টের পরবর্তী সিবলিং যারা "first", "second" এবং "third" ক্লাসযুক্ত তাদেরকে পাবো তা নিচের উদাহরেন দেখান হলোঃ
উদাহরণঃ২
<!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(){
$("h2").nextAll(".first,.second,.third").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<p class="first">p class "first"</p>
<p>p</p>
<span class="second">span ক্লাস "দ্বিতীয়"</span>
<span class="second">এই ক্লাসেও span "দ্বিতীয়"</span>
<span>span</span>
<h3 class="third">h3 ক্লাস "তৃতীয়"</h3>
</div>
<p> উদাহরণসরুপঃ এখানে আমরা "start" li এলিমেন্টের পরের সকল সহোদর এলিমেন্টকে রিটার্ন করবো, যাদের ক্লাস "first", "second" এবং "third"।</p>
</body>
</html>
ফলাফল
<p> এলিমেন্টের পরবর্তী সকল সিবলিং এলিমেন্টকে সিলেক্ট করি
কিভাবে <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(){
$("p").nextAll().css("background-color", "aqua");
});
</script>
</head>
<body>
<p>এটি একটি p এলিমেন্ট।</p>
<div>এটি একটি div এলিমেন্ট (p এর পরবর্তী সিবলিং)।</div>
<p>এটি একটি p এলিমেন্ট (p এর পরবর্তী সিবলিং)।</p>
<h4>এটি একটি h4 এলিমেন্ট (p এর পরবর্তী সিবলিং)।</h4>
<h5>এটি একটি h5 এলিমেন্ট (p এর পরবর্তী সিবলিং)।</h5>
<p>এটি একটি p এলিমেন্ট (p এর পরবর্তী সিবলিং)।</p>
<span>এটি একটি span এলিমেন্ট (p এর পরবর্তী সিবলিং)।</span>
</body>
</html>
ফলাফল
<div> এলিমেন্টের পরবর্তী সকল সিবলিং এলিমেন্টকে <p> সিলেক্ট
কিভাবে <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").nextAll("p").css("background-color", "aqua");
});
</script>
</head>
<body>
<h1> $("div").nextAll("p") ফাংশনটি কি সিলেক্ট করবে?</h1>
<p>এটি একটি p এলিমেন্ট (এটি সিলেক্ট হবেনা, কারণ এটি div এর পরবর্তী sibling এলিমেন্ট নয়। এটি div এর <strong>পূর্বের</strong> sibling এলিমেন্ট।)</p>
<div style="border:2px solid black;padding:10px;">এটি একটি div এলিমেন্ট (এই div থেকে sibling এলিমেন্ট সিলেকশন শুরু হয়)।</div>
<p>এটি একটি p এলিমেন্টন।</p>
<p>এটি আরেকটি p এলিমেন্ট।</p>
<div style="border:2px solid black;padding:10px;">
<p>div এলিমেন্টের মধ্যে এটি একটি p এলিমেন্ট (এটি সিলেক্ট হবেনা, কারণ উদাহরণে সিলেক্ট করা p এলিমেন্টের মত এটি একই parent এর নয়)।</p>
</div>
<h2>এটি একটি হেডিং</h2>
<p>এটি একটি p এলিমেন্ট।</p>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ