جستجو 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، ما همچنین می‌توانیم از مجموعه 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 پیمان‌نویسی مرجع