জেকুয়েরি parents() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
parents() মেথড নির্বাচিত এলিমেন্টের সকল পূর্বসূরি এলিমেন্টকে রিটার্ন করে।
একটি প্যারেন্ট, গ্র্যান্ডপ্যারেন্ট, গ্রেট-গ্র্যান্ডপ্যারেন্ট এবং এইভাবে অন্য সবগুলো হলো একটি পূর্বসূরি।
ডোম ট্রিঃ এই মেথড ডোম এলিমেন্টের প্যারেন্ট এলিমেন্ট থেকে পূর্বসূরি হয়ে একেবারে মূল এলিমেন্ট পর্যন্ত যায়(<html>)।
নোটঃ যদি filter প্যারামিটার খালি থাকে, তবে এই ফাংশন সরাসরি প্যারেন্ট থেকে শুরু করে <body> এবং <html> সহ সকল পূর্বসূরিকে সিলেক্ট করে। তাই ইহা একটি সিলেক্টর এক্সপ্রেশন ব্যবহার করে অনুসন্ধান সংক্ষিপ্ত করার জন্য খুবই দরকারি।
এই মেথডটি closest() মেথডের মতই, যেহেতু তারা উভয়েই ডোম ট্রির উপরের দিকে উঠে। নিচে ভিন্নতা দেওয়া হলোঃ
parents()
- প্যারেন্ট এলিমেন্ট দিয়ে শুরু হয়
- ডোম ট্রির উপরের দিকে যেতে থাকে এবং পাাসকৃত এক্সপ্রেশনের সাথে যতগুলো পূর্বসূরি মিলে যায় সেগুলোকে রিটার্ন করে
- রিটার্নকৃত জেকুয়েরি অবজেক্ট এক বা একাধিক এলিমেন্ট ধারণ করে
closest()
- বর্তমান এলিমেন্ট দিয়ে শুরু হয়
- ডোম ট্রির উপরের দিকে যেতে থাকে এবং পাাসকৃত এক্সপ্রেশনের সাথে মিলে যায় এমন প্রথম পূর্বসূরিকে রিটার্ন করে
- রিটার্নকৃত জেকুয়েরি অবজেক্ট এক বা একাধিক এলিমেন্ট ধারণ করে
রিলেটেড মেথডসমূহঃ
- parent() - নির্বাচিত এলিমেন্টের সরাসরি প্যারেন্টকে রিটার্ন করে
- parentsUntil() - দুইটি আর্গুমেন্টের মধ্যবর্তী সকল পূর্বসূরিকে রিটার্ন করে
সিনট্যাক্স ও ব্যাখ্যা
$(selector).parents(filter)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে parents() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| filter | ঐচ্ছিক। পূর্বসূরি অনুসন্ধান সংক্ষিপ্ত করার জন্য একটি সিলেক্টর এক্সপ্রেশন নির্দেশ করে। নোটঃ একাধিক পূর্বসূরি রিটার্ন করতে, প্রতিটি এক্সপ্রেশনকে কমার(,) সাহায্যে আলাদা করতে হবে। |
parents() মেথড সংক্রান্ত উদাহরণ
কিভাবে <span> এলিমেন্টের সকল পূর্বসূরিকে রিটার্ন করা যায় া নিচের উদাহরনে দেখানো হলো
উদাহরণ
<!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").parents().css({"color": "red", "border": "2px solid red"});
});
</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>
ফলাফল
সার্চ সংক্ষিপ্তকরণ
কিভাবে filter প্যারামিটার ব্যবহার করে <span> এলিমেন্টের পূর্বসূরি <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(){
$("span").parents("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>
ফলাফল
একাধিক পূর্বসূরি রিটার্র
কিভাবে filter প্যারামিটার ব্যবহার করে <span> এলিমেন্টের পূর্বসূরি <ul> এবং <div> কে রিটার্ন করা যায় তা নিচের উদাহরনে দেখান হলোঃ
উদাহরণঃ২
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<style>
.ancestors * {
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(){
$("span").parents("div, li").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> এলিমেন্টের পূর্বসূরি দেখানোর একটি বিস্তারিত বর্ণনা দেওয়া হয়েছে
উদাহরণঃ৩
<!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 treeTraversal = $("span").parents().map(function(){
return this.tagName;}).get().join(", ");
$("span").after("<h2>" + treeTraversal + "<h2>");
});
</script>
</head>
<body>
<div>
<p>
<span> এটি একটি span এলিমেন্ট । আমার পূর্বপুরুষঃ</span>
</p>
</div>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ