জেকুয়েরি siblings() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
siblings() মেথড নির্বাচিত এলিমেন্টের সকল সিবলিং এলিমেন্ট রিটার্ন করে।
সিবলিং এলিমেন্ট হলো তারাই যাদের প্যারেন্ট এলিমেন্ট একই।
ডোম ট্রিঃ এই মেথডটি ডোম এলিমেন্টের সামনের এবং পিছনের সকল সিবলিং এলিমেন্টের দিকে যেতে পারে।
টিপসঃ পূর্ববর্তী এবং পরবর্তী সিবলিং এলিমেন্টের সার্চ সংক্ষিপ্তকরনের জন্য prev() অথবা next() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).siblings(filter)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে siblings() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| filter | ঐচ্ছিক। সিবলিং এলিমেন্টের জন্য সার্চ সংক্ষিপ্ত করার জন্য একটি সিলেক্টর এক্সপ্রেশনকে নির্দেশ করে। |
siblings() মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে প্রতিটি <li> এলিমেন্টের "start" ক্লাসযুক্ত সিবলিং এলিমেন্ট রিটার্ন দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.start").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li ("start" এলিমেন্টের পূর্বের সহদর(sibling))</li>
<li>li ("start" এলিমেন্টের পূর্বের সহদর(sibling))</li>
<li class="start">li ( সহদর-sibling)</li>
<li>li ("start" এলিমেন্টের পরের সহদর(sibling))</li>
<li>li ("start" এলিমেন্টের পরের সহদর(sibling))</li>
</ul>
</div>
<p> উদাহরণস্বরুপঃ "start" ক্লাস নাম দিয়ে li এলিমেন্টের সকল সহদর এলিমেন্টকে সিলেক্ট করে।</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").siblings(".first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li ("start" এর পূর্বের sibling)</li>
<li class="first">li ("start" এর পূর্বের sibling)</li>
<li class="start">li (sibling)</li>
<li>li ("start" এর পরবর্তী sibling)</li>
<li class="first">li ("start" এর পরবর্তী sibling)</li>
</ul>
</div>
<p>এই উদাহরণে আমরা শুধুমাত্র "first" ক্লাসযুক্ত এলিমেন্টগুলোকে রিটার্ন করেছি, যেটি "start" ক্লাসযুক্ত li এলিমেন্টের সিবলিং(সহোদর) এলিমেন্ট।</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").siblings("p").css("background-color", "aqua");
});
</script>
</head>
<body>
<h2> $("div").siblings("p") কি সিলেক্ট করবে?? বলুন!!</h2>
<p>এটি div এর একটি sibling p এলিমেন্ট</p>
<div style="border:2px solid black;padding:10px;">এটি একটি div এলিমেন্ট</div>
<p>এটি div এর একটি sibling p এলিমেন্ট</p>
<p>এটি div এর আরেকটি sibling p এলিমেন্ট</p>
<div style="border:2px solid black;padding:10px;">
<p>এটি div এলিমেন্টের মধ্যে একটি p এলিমেন্ট (child of div).</p>
</div>
<h2>এটি একটি শিরোনাম</h2>
<p>এটি div এর আরেকটি sibling p এলিমেন্ট</p>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ