jQuery مرور - طريقة closest()

jQuery تمرين مرجع

مثال

هذا المثال يظهر كيفية استخدام closest() للإنتاجيجية. عند النقر على العنصر أو الذرية لأي عنصر في القائمة، يتم التبديل إلى لون الخلفية الأصفر:

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

جربها بنفسك

تعريف و استخدام

يتم الحصول على .closest() على العنصر الأب الأول الذي يتطابق مع المبدأ، من بداية العنصر الحالي يمر DOM tree.

النحو

.closest(selector)
معلمة وصف
selector قيمة سلسلة تحتوي على تعبير المبدأ الذي يتطابق مع العنصر.

شرح مفصل

إذا تم تقديم jQuery object يمثل مجموعة عناصر DOM، يسمح لنا .closest() بالبحث عن هذه العناصر وأبويها في DOM tree، ويتم إنشاء jQuery object جديد من العناصر التي تتطابق مع العنصر..parents() تماثل .closest()، كلاهما يمران DOM tree للأسفل.

.closest() .parents()
من بداية العنصر الحالي من بداية العنصر الأب
يتم تمرير DOM tree للأسفل حتى يتم العثور على عنصر يتطابق مع المبدأ. يتم تمرير DOM tree للأسفل حتى العنصر الجذر للوثيقة، ويتم إضافة كل عنصر أصل إلى مجموعة مؤقتة؛ إذا تم تطبيق المبدأ، يتم تصفية هذه المجموعة بناءً على هذا المبدأ.
يعود jQuery object يحتوي على صفر أو واحد من العناصر يعود jQuery object يحتوي على صفر أو واحد أو عدة عناصر

الرجاء النظر في الفقرة التالية من 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');

جربها بنفسك

سيغير هذا لون <ul> المستوى-2، لأنه عند التمرير لأعلى في شجرة DOM سيكون هذا العنصر الأول الذي يواجهه.

مثال 2

افترض أننا نبحث عن عنصر <li>:

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

جربها بنفسك

سيغير هذا لون عنصر القائمة A. قبل البدء في التمرير لأعلى في شجرة DOM، ستبدأ دالة .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');

جربها بنفسك

الكود أعلاه سيغير لون <ul> المستوى-2، لأنه هو جد <ul> أولي للعنصر A، وكذلك حفيد العنصر II. لن يغير لون <ul> المستوى-1، لأنه ليس حفيد العنصر list item II.

jQuery تمرين مرجع