استكشاف jQuery - طريقة find()

دليل الترحيل jQuery

مثال

البحث عن جميع الأبناء span للعناصر في الفقرات وضبط لونها إلى الأحمر:

$("p").find("span").css('color','red');

جرب بنفسك

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

يحصل طريقة find() على جميع الأبناء للعناصر في مجموعة العناصر الحالية، من خلال المصفوفة أو جسم jQuery أو العنصر لتحديد.

النحو

.find(selector)
الم参数 وصف
selector قيمة نصية تحتوي على تعبير المصفوفة الذي سيتم استخدامه للتنسيق مع مجموعة العناصر الحالية.

شرح مفصل

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

أول خصائص طريقة .find() هو أنها تأخذ تعبيرات المصفوفة التي نرسلها إلى دالة $() بنفس النوع. سيتم تصفية العناصر من خلال فحص ما إذا كانت تطابق هذا التعبير.

الرجاء التفكير في القائمة المدمجة البسيطة التالية:

<ul class="level-1">
  <li class="item-i">I</li>
  <li 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>

سنبدأ من القائمة II للبحث فيها عن عناصر القائمة.

$('li.item-ii').find('li').css('background-color', 'red');

جرب بنفسك

نتيجة هذا البحث هي أن المشروع A، B، 1، 2، 3 و C تم تعيين خلفية اللون الأحمر. حتى لو كان المشروع II يتطابق مع تعبير الخيار، فإنه لن يتم تضمينه في النتيجة؛ فقط للذرية.

مختلفًا عن طرق الترحيل الشجري الأخرى، يجب أن يكون تعبير الخيار ضروريًا للـ .find(). إذا كنا نحتاج إلى استرجاع جميع العناصر الذرية، يمكننا إرسال اختيار موجه '*'.

مفهوم selector هو ما يتحقق من قبل طريقة .find()؛ لذلك، $('li.item-ii').find('li') تساوي ('li', 'li.item-ii').

للنسخة 1.6 من jQuery، يمكننا أيضًا استخدام مجموعة jQuery أو العنصر المحدد للفرز. ما زلنا في القائمة المدمجة أعلاه، نكتب أولاً هكذا:

var $allListElements = $('li');

ثم قدم هذا الجهاز jQuery إلى طريقة find:

$('li.item-ii').find( $allListElements );

جرب بنفسك

النصوص أعلاه ستعود إلى مجموعة jQuery تحتوي على عناصر القائمة II من الذرية.

بشكل مماثل، يمكنك أيضًا إرسال عنصر:

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

جرب بنفسك

نتيجة هذه الاتصال هي أن المشروع 1 تم تعيين خلفية اللون الأحمر.

دليل الترحيل jQuery