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