জুএলসি ভ্রমণ - closest() পদ্ধতি

jQuery ট্রেভার্স হান্ডবুক

উদাহরণ

এই উদাহরণটি closest() দ্বারা ইভেন্ট ডেলিগেশন করতে দেখায়. যখন সবচেয়ে কাছের তালিকা এলাকা বা তার সাথে সংযুক্ত সাব-এলাকা ক্লিক করা হয়, তখন সোভা পটভূমির পেছন পরিবর্তন করা হয়:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

আপনার নিজেই চেষ্টা করুন

অর্থ ও ব্যবহার

closest() পদ্ধতি ম্যাচ সিলেক্টরের প্রথম পূর্বসূরী এলাকা ফাঁচা, বর্তমান এলাকা থেকে ডম ট্রি তে উপরে দিয়ে ভ্রমণ করে

সিন্ট্যাক্স

.closest(selector)
পারামিটার বর্ণনা
selector স্ট্রিং মান, যাতে ম্যাচ এলাকা এর সিলেক্টর এক্সপ্রেশন থাকে

বিস্তারিত ব্যাখ্যা

যদি কোনও ডম এলাকা সমন্বিত জুএলসি ওবজেক্ট দেওয়া হয়, .closest() পদ্ধতি .closest() পদ্ধতি আমাদের ডম ট্রি তে এই এলাকা এবং তার পূর্বসূরী এলাকা চিহ্নিত করতে দেয়, এবং ম্যাচ এলাকা দিয়ে নতুন জুএলসি ওবজেক্ট তৈরি করে.parents() .closest() পদ্ধতির মতো, তারা দুটি পদ্ধতি পরস্পরের সাথে ডম ট্রি তে উপরে দিয়ে ভ্রমণ করে; যদিও তাদের মধ্যে পার্থক্য অত্যন্ত সূক্ষ্ম, তবে তা অত্যন্ত গুরুত্বপূর্ণ:

.closest() .parents()
বর্তমান এলাকা থেকে শুরু করে পিতৃ এলাকা থেকে শুরু করে
ডম ট্রি তে উপরে দিয়ে ভ্রমণ করে, যতক্ষণ সিলেক্টরকে মানির একটি ম্যাচ পাওয়া যায় পর্যন্ত ডম ট্রি তে উপরে দিয়ে ভ্রমণ করে, নথির মূল এলাকা পর্যন্ত, প্রত্যেকটি পূর্বসূরী এলাকা একটি অস্থায়ী সংগ্রহকে যোগ করে; যদি যেকোনও সিলেক্টর প্রয়োগ করা হয়, তবে এই সংগ্রহকে সিলেক্টর অনুযায়ী সরাসরি সাইফট
কোনও এলাকা, একটি এলাকা সমন্বিত জিনারেল জুএলসি ওবজেক্ট ফিরিয়ে দেয় কোনও এলাকা, একটি এলাকা বা একাধিক এলাকা সমন্বিত জিনারেল জুএলসি ওবজেক্ট ফিরিয়ে দেয়

এখানে দেখুন নিচের HTML শিল্পকর্মকে:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

উদাহরণ 1

আমরা <ul> ইলেকট্রনম থেকে শুরু করে আইটেম A এর অনুসন্ধান করতে চাই:

$('li.item-a').closest('ul').css('background-color', 'red');

আপনার নিজেই চেষ্টা করুন

এটি level-2 <ul> এর রঙকে পরিবর্তন করবে, কারণ তা ডম ট্রি উপরে গিয়ে পরিবর্তন করা হয় প্রথম এই ইলেকট্রনম হবে。

উদাহরণ 2

আমরা <li> ইলেকট্রনম অনুসন্ধান করতে চাই তবে:

$('li.item-a').closest('li').css('background-color', 'red');

আপনার নিজেই চেষ্টা করুন

এটি লিস্ট আইটেম A এর রঙকে পরিবর্তন করবে। .closest() মথদা ডম ট্রি উপরে গিয়ে পরিবর্তন করা হয় পূর্বে, তা li ইলেকট্রনম থেকে শুরু করে আইটেম A এর ম্যাচ পর্যন্ত অনুসন্ধান করবে。

উদাহরণ 3

আমরা DOM ইলেকট্রনম হিসাবে পাঠাতে পারি, যেখানে সবচেয়ে কাছাকাছির ইলেকট্রনম অনুসন্ধান করা হবে。

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

আপনার নিজেই চেষ্টা করুন

এই কোডটি level-2 <ul> এর রঙকে পরিবর্তন করবে, কারণ তা হল লিস্ট আইটেম A এর প্রথম <ul> পূর্বসূরী এবং সময়েও লিস্ট আইটেম II এর সন্তান। তা level-1 <ul> এর রঙকে পরিবর্তন করবে না, কারণ তা list item II এর সন্তান নয়।

jQuery ট্রেভার্স হান্ডবুক