انتخاب عناصر فرزند در جی کوئری

مسئله

 ما نیاز داریم که یک یا چند عنصر فرزند مستقیم را از یک عنصر خاص انتخاب کنیم.

راه حل

 ما می توانیم از کاراکتر انتخاب فرزند مستقیم(یعنی از <) به نام (direct descendant combinator) استفاده کنیم. در دو سمت این کاراکتر، دو سلکتور قرار می گیرند. بعنوان مثال، اگر ما بخواهیم تمام عناصر a که فرزندان مستقیم یک عنصر li هستند را انتخاب کنیم، به صورت زیر عمل می کنیم:

 li > a

 این کار باعث می شود که تمام لینک هایی که فرزند عنصر <li> هستند انتخاب(select) شوند؛ به عبارت دیگر  تمام لینک هایی که فرزند این عنصر li هستند انتخاب می شوند. به مثال زیر توجه کنید:

<a href="/category">Category</a>
<ul id="nav">
  <li><a href="#anchor1">Anchor 1</a></li>
  <li><a href="#anchor2">Anchor 2</a></li>
  <li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>

 اکنون برای اینکه بتوانیم فقط عناصر a را که در داخل آیتم های li قرار دارند انتخاب کنیم، به صورت زر عمل می کنیم:

jQuery('#nav li > a');
// This selects two elements, as expected

 در داخل کدهای بالایی، سومین لینک a که در داخل nav# قرار دارد انتخاب نمی شود، زیرا این عنصر یک فرزند مستقیم li نیست بلکه فرزند یک عنصر <span> است.

توضیحات

این مهم است که بین یک عنصر فرزند(child) و یک نسل(descendant) تمایز قائل شویم. یک نسل، به هر عنصری گفته می شود که در داخل یک عنصر دیگر قرار داشته باشد، در حالی که یک عنصر فرزند(child) یک نسل مستقیم است؛ مقایسه ی فرزندان(children) و والد ها(parent) بسیار کمک کننده است، زیرا سلسله مراتب DOM تا حد زیادی به آن شباهت دارد.

 شایان ذکر است که سلکتور < می تواند بدون قرار دادن هیچ عبارتی در سمت چپ آن مورد استفاده قرار گرد. البته در صورتی که محتوای آن قبلا مشخص شده باشد، به مثال زیر توجه کنید:

jQuery('> p', '#content');
// Fundamentally the same as jQuery('#content > p')

 اگر بخواهیم به طور جدی تری فرزندان را انتخاب کنیم، باید از متد جی کوئری children() استفاده کنیم؛ در کدهای زیر، تمام عناصر فرزند مستقیم از عنصر content# را انتخاب می کنیم:

jQuery('#content').children();

 کدهای بالا همانند دستور  jQuery('#content > *')  است اما یک تفاوت مهم دارد و آن این است که این کوئری سریع تر است. چون ما در اینجا، سلکتور را تجزیه نکرده ایم، جی کوئری می داند که بلافاصله باید چه کاری را انجام دهد.

در برخی مواقع  اختلاف سرعت در مرورگرها و بسته به چیزی که انتخاب می کنیم، اهمیتی ندارد. با استفاده از متد children() به طور ویژه می توانیم با اشیاء جی کوئری(jQuery objects) که در متغیرها ذخیره شده اند کار کنیم. به مثال زیر توجه کنید:

var anchors = jQuery('a');
// Getting all direct children of all anchor elements
// can be achieved in three ways:
// #1
anchors.children();
// #2
jQuery('> *', anchors);
// #3
anchors.find('> *');

 در حقیقت، برای انجام این کار، راه های زیادی وجود دارد. در اینجا، اولین متد، سریع ترین متد به شما می رود. همان طور که قبلا گفته شد، ما می توانیم در داخل متد children() یک سلکتور قرار دهیم تا نتایج را فیلتر کنیم:

jQuery('#content').children('p');

در مثال بالا، تنها عناصر پاراگراف که فرزندان مستقیم عنصر content# هستند، برگردانده(returned) می شوند.

 {module کمک نقدی به نویسنده}