jQuery جستجو - روش closest()
مثال
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از closest() به توکیل رویداد دست یافت. هنگامی که عنصر نزدیک‌ترین لیست یا فرزندان آن‌ها کلیک می‌شود، رنگ پس‌زمینه به زرد تغییر می‌کند:
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
تعریف و استفاده
روش .closest() عنصر اولین پدر که با انتخاب‌کننده تطابق دارد، را به دست می‌آورد، از عنصر فعلی شروع می‌کند و به سمت بالا در درخت DOM حرکت می‌کند.
جملات
.closest(selector)
| پارامترها | شرح |
|---|---|
| selector | موضوع جعبه جاوااسکریپت، شامل عبارت انتخاب‌کننده برای عنصر تطابق. |
شرح جزئی
اگر موضوع جعبه جاوااسکریپت که مجموعه‌ای از عناصر DOM را نشان می‌دهد، به .closest() داده شود، این روش به ما اجازه می‌دهد تا عناصر موجود در درخت DOM و پدران آن‌ها را به دست آوریم و یک موضوع جعبه جاوااسکریپت جدید با استفاده از عنصر تطابق ایجاد کنیم..parents() مثل .closest()، آن‌ها نیز به سمت بالا در درخت DOM حرکت می‌کنند. تفاوت‌های بین آن‌ها ممکن است بسیار کوچک باشند، اما بسیار مهم:
| .closest() | .parents() |
|---|---|
| از عنصر فعلی شروع می‌کنیم | از عنصر والد شروع می‌کنیم |
| با حرکت به سمت بالا در درخت DOM، تا زمانی که یک تطابق با انتخاب‌کننده پیدا شود. | با حرکت به سمت بالا در درخت DOM، تا به عنصر ریشه، هر عنصر پدر را به یک مجموعه موقت اضافه می‌کند؛ اگر انتخاب‌کننده‌ای اعمال شده باشد، مجموعه بر اساس آن انتخاب‌کننده فیلتر می‌شود. |
| موضوع جعبه جاوااسکریپت که شامل هیچ عنصر یا یک عنصر می‌شود | موضوع جعبه جاوااسکریپت که شامل هیچ عنصر، یک عنصر یا چندین عنصر می‌شود |
لطفاً بخش زیر را مشاهده کنید:
<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> را ایجاد می‌کند، زیرا در جستجوی بالاتر از درخت DOM ابتدا با این عنصر برخورد می‌کنیم.
مثال 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> را تغییر می‌دهد، زیرا هم اولین اجداد <ul> لیست A است و هم فرزند لیست II است. آن رنگ level-1 <ul> را تغییر نمی‌دهد، زیرا فرزند لیست II نیست.
