জেকুয়েরি parentsUntil() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
parentsUntil() মেথড selector এবং stop এর মাঝের সকল পূর্বসূরিকে রিটার্ন করে।
একটি প্যারেন্ট, গ্র্যান্ডপ্যারেন্ট, গ্রেট-গ্র্যান্ডপ্যারেন্ট এবং এইভাবে অন্য সবগুলো হলো পূর্বসূরি।
ডোম ট্রিঃ একটি নির্দিষ্ট এলিমেন্টকে না পাওয়া পর্যন্ত এই মেথড ডোম এলিমেন্টের পূর্বসূরি হয়ে উপরের দিকে উঠতে থাকে।
নোটঃ যদি উভয় প্যারামিটার খালি থাকে তবে এই মেথড সকল পূর্বসূরি এলিমেন্টকে রিটার্ন করে (parents() মেথডের মতই)।
রিলেটেড মেথডসমূহঃ
- parent() - নির্বাচিত এলিমেন্টের সরাসরি প্যারেন্টকে রিটার্ন করে
- parents() - নির্বাচিত এলিমেন্টের সকল পূর্বসূরিকে রিটার্ন করে
- closest() - নির্বাচিত এলিমেন্টের প্রথম প্যারেন্টকে রিটার্ন করে
সিনট্যাক্স ও ব্যাখ্যা
$(selector).parentsUntil(stop,filter)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে parentsUntil() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| stop | ঐচ্ছিক। পূর্বসূরি এলিমেন্টের অনুসন্ধান কোথায় বন্ধ করতে হবে তার একটি এক্সপ্রেশন, এলিমেন্ট অথবা জেকুয়েরি অবজেক্ট নির্দেশ করে। |
| filter | ঐচ্ছিক। selector এবং stop এর মাঝের পূর্বসূরি অনুসন্ধানকে সংক্ষিপ্ত করতে একটি সিলেক্টর এক্সপ্রেশন নির্দেশ করে। নোটঃ একাধিক পূর্বসূরি রিটার্ন করতে প্রতিটি এক্সপ্রেশনকে কমার(,) সাহায্যে আলাদা করতে হবে। |
parentsUntil() মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে <span> এবং <div> এর মাঝের সকল পূর্বসূরিকে রিটার্ন দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<style>
.ancestors * {
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(){
$("span").parentsUntil("div").css({"color": "blue", "border": "2px solid blue"});
});
</script>
</head>
<body class="ancestors"> body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
সার্চ সংক্ষিপ্তকরণ
কিভাবে উভয় প্যারামিটার ব্যবহার করে <span> এবং <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(){
$("span").parentsUntil("div", "ul").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors"> body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
একাধিক পূর্বসূরি রিটার্ন
কিভাবে <span> এবং <body> এর মাঝের একাধিক পূর্বসূরিকে রিটার্ন করা যায় তা নিচের উদাহরনে দেখান হলো
উদাহরণঃ২
<!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(){
$("span").parentsUntil("body", "p, li, div").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors"> body (great-great-great-grandparent)
<div style="width:500px;">div (great-great-grandparent)
<ul>ul (great-grandparent)
<li>li (grandparent)
<p>p (direct parent)
<span>span</span>
</p>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
DOM
একটি ডোম এলিমেন্ট ব্যবহার করে কিভাবে <span> এবং <div> এর মাঝের সকল পূর্বসূরিকে রিটার্ন করা যায় তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ৩
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<style>
.ancestors * {
display: block;
border: 3px solid deeppink;
color: deeppink;
padding: 5px;
margin: 15px;
}
</style>
<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var DOM = document.getElementsByClassName("greatgp");
$(".child").parentsUntil(DOM).css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors"> body (great-great-grandparent)
<div style="width:500px;" class="greatgp">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span class="child">span</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
একটি ডোম এলিমেন্ট এবং একটি সিলেক্টর এক্সপ্রেশন ব্যবহার করে একটি অনুসন্ধানকে ফিল্টার করা
কিভাবে একটি ডোম এলিমেন্ট এবং একটি সিলেক্টর এক্সপ্রেশন ব্যবহার করে <span> এবং <div> এর মাঝের পূর্বসূরি <ul> অনুসন্ধানকে ফিল্টার করা যায় তা নিচের উদাহরনে দেখান হলো
উদাহরণঃ৪
<!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(){
var DOM = document.getElementsByClassName("greatgp");
$(".child").parentsUntil(DOM, "ul").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors"> body (great-great-grandparent)
<div style="width:500px;" class="greatgp">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span class="child">span</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ