جستجوی 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() یک پارامتر ضروری است. اگر نیاز به بازگشت به تمام عناصر فرزند داریم، می‌توانیم انتخاب‌گر عمومی '*' را ارسال کنیم.

انتخاب‌گر محیط توسط روش .find() اجرا می‌شود؛ بنابراین،$('li.item-ii').find('li') معادل $('li', 'li.item-ii') است.

برای jQuery 1.6، ما همچنین می‌توانیم از مجموعه‌های داده شده یا عناصر برای فیلتر کردن استفاده کنیم. هنوز در لیست‌های تو در تو بالا، ما اینطور می‌نویسیم:

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