jQuery جستجو - روش closest()

jQuery تلاش مراجعه

مثال

این مثال نحوه استفاده از closest() برای توکنسیون رویداد را نشان می‌دهد. هنگامی که عنصر نزدیک‌ترین لیست یا فرزندان آن کلیک می‌شود، رنگ پس‌زمینه به زرد تغییر می‌کند:

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

خود شخصی طور پر کوشش کریں

تعریف و استفاده

روش .closest() عنصر اولین پدر تطابق‌یافته با انتخاب‌کننده را به سمت بالا از عنصر فعلی در درخت DOM دریافت می‌کند.

نحوه‌ی نوشتن

.closest(selector)
پارامتر توضیح
selector مقدار رشته‌ای که شامل عبارت انتخاب‌کننده تطابق‌یافته است.

شرح دقیق

اگر کاواک jQuery شامل مجموعه‌ای از عناصر DOM داده شود، روش .closest() به ما اجازه می‌دهد تا این عناصر و پدران آن‌ها را در درخت DOM بازیابی کنیم و با استفاده از عنصر تطابق‌یافته یک کاواک جدید بسازیم..parents() مثل .closest()، هر دو به سمت بالا در درخت DOM حرکت می‌کنند. تفاوت بین آن‌ها بسیار کوچک است، اما مهم است:

.closest() .parents()
از عنصر فعلی شروع می‌کند از عنصر پدر شروع می‌کند
با حرکت در درخت DOM به سمت بالا تا پیدا کردن یک عنصر تطابق‌یافته که انتخاب‌کننده به آن اعمال شده باشد. با حرکت در درخت DOM به سمت بالا تا عنصر ریشه، هر عنصر پدر را به یک مجموعه موقت اضافه می‌کند؛ اگر انتخاب‌کننده‌ای اعمال شده باشد، مجموعه را بر اساس آن انتخاب‌کننده فیلتر می‌کند.
jQuery کاواک شامل صفر یا یک عنصر jQuery کاواک شامل صفر، یک یا چند عنصر

ملاحظة: زیرین قطعه 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

اگر ہم آئٹم A سے شروع کرکے <ul> آئیتم کی تلاش کر رہے ہیں تو:

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

خود شخصی طور پر کوشش کریں

یہ level-2 <ul> کا رنگ متبادل کریگا، کیونکہ جب DOM درخت کا اوپر آنگا تو پہلے اس آئیتم کو تلاش کریگا.

مثال 2

اگر ہم <li> آئیتم کی تلاش کر رہے ہیں تو:

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

خود شخصی طور پر کوشش کریں

یہ لیست آئٹم A کا رنگ متبادل کریگا، قبل از کہ .closest() طریقہ کار کا استعمال کریگا، وہ DOM درخت کا اوپر آنگا، جب تک کہ لیست آئٹم A تک نہیں پہنچا.

مثال 3

ہم دم وار آئیتم کی وجہ سے پاس کرسکتے ہیں، جس میں سے نزدیک ترین آئیتم تلاش کریگا.

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> کا رنگ متبادل نہیں کریگا، کیونکہ وہ لیست آئٹم II کا ذریعہ نہیں ہے.

jQuery تلاش مراجعه