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