জেকুয়েরি closest() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
closest() মেথড নির্বাচিত এলিমেন্টের প্রথম পূর্বসূরিকে রিটার্ন করে।
পূর্বসূরি বলতে বুঝায় parent, grandparent, great-grandparent, এবং আরো অনেক।
DOM tree: এই মেথডটি বর্তমান এলিমেন্ট থেকে উপরের দিকে পরিভ্রমন করতে পারে, যা কিনা ডকুমেন্টের মূল(root) এলিমেন্ট(<html>) পর্যন্ত পৌছাতে পারে। এর মাধ্যমে ডোম এলিমেন্টের প্রথম পূর্বসূরিকে খুজে নেওয়া যায়।
এই মেথডটি parents() মেথডের মতো একই, দুটোই ডোম ট্রির উপরের দিকে যায়। পার্থক্যগুলো হলো:
closest()
- শুরু হয় বর্তমান এলিমেন্ট থেকে
- ডোম ট্রির উপরের দিকে যায় এবং প্রথম পূর্বসূরিকে রিটার্ন করে
- ফেরতকৃত জেকুয়েরি অবজেক্ট শুন্য অথবা একটি এলিমেন্ট বহন করে
parents()
- প্যারেন্ট এলিমেন্ট থেকে শুরু করে
- ডোম ট্রির উপরের দিকে যায় এবং সকল পূর্বসূরিকে রিটার্ন করে
- ফেরতকৃত জেকুয়েরি অবজেক্ট শুন্য অথবা একের অধিক এলিমেন্ট বহন করে
সম্পর্কিত অন্যান্য মেথডসমূহ:
- parent() - নির্বাচিত এলিমেন্টের সরাসরি প্যারেন্ট এলিমেন্টকে রিটার্ন করে
- parentsUntil() - প্রদত্ত দুইটি আর্গুমেন্টের মধ্যের সকল পূর্বসূরীকে রিটার্ন করে
সিনট্যাক্স ও ব্যাখ্যা
নির্বাচিত এলিমেন্টের প্রথম পূর্বসূরিকে রিটার্ন:
$(selector).detach()$(selector).closest(filter)
DOM কনটেক্স ব্যবহার করে প্রথম পূর্বসূরিকে রিটার্ন, যা ডোম ট্রির মধ্যেই দেখাবে:
$(selector).detach()$(selector).closest(filter,context)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে closest() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| filter | আবশ্যক। পূর্বসূরি সার্চকে আরো সহজ করতে সিলেক্টর এক্সপ্রেশন, এলিমেন্ট অথবা জেকুয়েরি অবজেক্ট নির্দিষ্ট করে |
| context | ঐচ্ছিক। একটি ডোম এলিমেন্ট থাকবে যার মধ্যে একটি মিলকৃত এলিমেন্ট পাওয়া যেতে পারে |
closest()মেথড সংক্রান্ত উদাহরণ
<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").closest("ul").css({"color": "green", "border": "2px solid blue"});
});
</script>
</head>
<body class="ancestors">body (গ্রেট-গ্রেট-গ্র্যান্ডপ্যারেন্ট)
<div style="width:500px;">div (গ্রেট-গ্র্যান্ডপ্যারেন্ট)
<ul>ul (২য় পূর্বসূরি - ২য় গ্র্যান্ডপ্যারেন্ট)
<ul>ul (১ম পূর্বসূরি - ১ম গ্র্যান্ডপ্যারেন্ট)
<li>li (সরাসরি প্যারেন্ট)
<span>span</span>
</li>
</ul>
</ul>
</div>
</body>
</html>
ফলাফল
এলিমেন্টের প্রথম পূর্বসূরি রিটার্ন, যেটি হলো একটি <span> এলিমেন্ট
কারন, এই মেথডটি বর্তমান এলিমেন্ট থেকে শুরু করে, <span> এর <span> এর জন্য সার্চ, <span> রিটার্ন করবে
উদাহরণঃ1
<!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").closest("span").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>
ফলাফল
একটি ডোম এলিমেন্টের মধ্যে কনটেক্সট হিসেবে পাস(pass) করে এবং সাথে প্রথম পূর্বসূরিকে সার্চ
উদাহরণঃ2
<!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 listItemII = document.getElementById("dom");
$("li").closest("ul",listItemII).css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul id="dom">ul (second ancestor - second grandparent)
<ul id="dom">ul (first ancestor - first grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</ul>
</div>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ