জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
ফোরাম
 

জেকুয়েরি closest() মেথড

« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ


সংজ্ঞা এবং ব্যবহার

closest() মেথড নির্বাচিত এলিমেন্টের প্রথম পূর্বসূরিকে রিটার্ন করে।

পূর্বসূরি বলতে বুঝায় parent, grandparent, great-grandparent, এবং আরো অনেক।

DOM tree: এই মেথডটি বর্তমান এলিমেন্ট থেকে উপরের দিকে পরিভ্রমন করতে পারে, যা কিনা ডকুমেন্টের মূল(root) এলিমেন্ট(<html>) পর্যন্ত পৌছাতে পারে। এর মাধ্যমে ডোম এলিমেন্টের প্রথম পূর্বসূরিকে খুজে নেওয়া যায়।

এই মেথডটি parents() মেথডের মতো একই, দুটোই ডোম ট্রির উপরের দিকে যায়। পার্থক্যগুলো হলো:

closest()

parents()

সম্পর্কিত অন্যান্য মেথডসমূহ:


সিনট্যাক্স ও ব্যাখ্যা

নির্বাচিত এলিমেন্টের প্রথম পূর্বসূরিকে রিটার্ন:

$(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>
 

ফলাফল





« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ