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