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

 مسئله

ما نیاز داریم که عناصری را بر اساس ترتیب آنها در میان دیگر عناصر انتخاب کنیم.

راه حل

بسته به نوع کاری که می خواهیم انجام دهیم، باید از فیلترهای زیر استفاده کنیم. این فیلترها شبیه شبه کلاس ها( pseudoclasses) سی اس اس هستند اما در جی کوئری، فیلتر(filter) نامیده می شوند.

:first

اولین عنصر انتخاب شده را مورد تطابق قرار می دهد.
:last

آخرین عنصر انتخاب شده را مورد تطابق قرار می دهد.
:even

 عناصر زوج(even) را مورد تطابق قرار می دهد(شروع اندیس از 0).
:odd

عناصر فرد(odd) را مورد تطابق قرار می دهد(شروع اندیس از 0).
:eq(n)

یک عنصر را با استفاده از اندیس آن (n) مورد تطابق قرار می دهد.
:lt(n)

 تمام عناصری که اندیس آنها کمتر از n باشد را مورد تطابق قرار می دهد.

:gt(n)

 تمام عناصری را که اندیسی بیش از n دارند را انتخاب می کند.

به کد اچ تی ام ال زیر توجه کنید:

<ol>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
 <li>Fourth item</li>
</ol>

 در کدهای بالا، اولین آیتم می تواند به طرق مختلفی انتخاب شود:

jQuery('ol li:first');
jQuery('ol li:eq(0)');
jQuery('ol li:lt(1)');

 توجه کنید که هر دوی فیلترهای eq() و lt() یک عدد را می پذیرند؛ اما چون اندیس از 0 شروع می شود، اولین آیتم 0 است و دومین آیتم 1 است و همین طور الی آخر.

یکی از نیازهای ما این است که بر روی ردیف های جدول ها استایل های متفاوتی ایجاد کنیم؛ این کار را می توانی با استفاده از فیلترهای even: و odd: انجام دهیم:

<table>
 <tr><td>0</td><td>even</td></tr>
 <tr><td>1</td><td>odd</td></tr>
 <tr><td>2</td><td>even</td></tr>
 <tr><td>3</td><td>odd</td></tr>
 <tr><td>4</td><td>even</td></tr>
</table>

 ما می توانیم برای اندیس هر ردیف از جدول، یک کلاس تنظیم کنیم:

jQuery('tr:even').addClass('even');

 ما باید کلاس مربوطه(یعنی کلاس even) را در برگه ی استایل خود مشخص کنیم:

table tr.even {
 background: #CCC;
}

 این کد باعث می شود که جدولی به صورت زیر داشته باشیم:

(تصویر 2.1)

توضیحات

همان طور که گفته شد، اندیس عناصر از 0 شروع می شود، بنابراین اگر یک عنصر اول باشد، اندیس آن 0 خواهد بود. سوای از این نکته، فیلترهای بالا بسیار ساده هستند. یک چیز دیگر که باید به آن توجه کنیم، این است که این فیلترها، به یک مجموعه نیاز دارند که بر روی آن عمل کنند، اندیس تنها وقتی مشخص می شود که مجموعه ی اولیه(initial collection) مشخص شده باشد. بنابراین سلکتور زیر کار نخواهد کرد:

jQuery(':even');

نکته: در حقیقت، سلکتور بالا کار می کند، اما تنها به این دلیل که جی کوئری برخی اصلاحات را در پشت پرده انجام می دهد، کار نمی کند. اگر مجموعه ای اولیه ای() مشخص نشده باشد، آنگاه جی کوئری فرض می کند که منظور شما تمام عناصر داخل سند بوده است. بنابراین این سلکتور در حقیقت کار می کند، چون که معادل با عبارت jQuery('*:even') می باشد. در سمت چپ این فیلتر، به یک مجموعه ی اولیه(initial collection) نیاز است؛ مثلا چیزی که بتوانیم بر روی آن فیلتر انجام دهیم. این مجموعه می تواند یک شیء جی کوئری باشد که از قبل نمونه گیری(instantiated) شده باشد، مانند مثال زیر:

jQuery('ul li').filter(':first');

 متد فیلتر بالا، بر روی یک شیء جی کوئری از قبل نمونه گیری شده (که حاوی آیتم ها است) اجرا می شود.

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