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

مسئله

ما نیاز داریم که تنها یک مجموعه از عناصر هم نیا(خواهر و برادر) از یک عنصر خاص را انتخاب(گزینش) کنیم.

راه حل

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

<div id="content">
 <h1>Main title</h1>
 <h2>Section title</h2>
 <p>Some content...</p>
 <h2>Section title</h2>
 <p>More content...</p>
</div>

 اگر می خواهید تنها عناصر <h2> را انتخاب کنید که بلافاصله پس از عناصر <h1> قرار دارند، می توانید از سلکتور زیر استفاده کنید:

jQuery('h1 + h2');
// Selects ALL H2 elements that are adjacent siblings of H1 elements

 در مثال بالا، ما تمام عناصر <h2> که خواهر و برادرهای مجاور عناصر <h1> هستند را انتخاب می کنیم. در مثال بالا، تنها عنصر <h2> انتخاب خوهد شد(اولین عنصر).اما عنصر دوم <h2> انتخاب نخواهد شد، زیرا با اینکه هم نیای عنصر <h1> محسوب می شود، اما مجاور عنصر <h1> نمی باشد.

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

jQuery('h1').siblings('h2,h3,p');
// هستند را انتخاب می کند h1 که هو نیای عناصر p و h3 و h2 تمام عناصر

 گاهی اوقات نیاز داریم عناصر هم نیا را بر اساس موقعیتی که نسبت به دیگر عناصر دارند، هدف قرار دهیم. بعنوان مثال در زیر یک کد معمولی قرار دارد:

<ul>
<li>First item</li>
<li class="selected">Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>

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

jQuery('li.selected').nextAll('li');

 متد nextAll() مانند متد siblings() یک سلکتور می پذیرد و عناصری که برمی گرداند را بر اساس آن فیلتر می کند. اگر هیچ سلکتوری برای آن انتخاب نکنید، آنگاه متد nextAll() تمام عناصر هم نیای پس از عنصر مورد بحث را برمی گرداند. در مثال بالا، ما همچنین می توانیم از یک سلکتور ترکیب کننده ی CSS دیگر برای انتخاب تمام li های زیر عنصر li دوم استفاده کنیم. ترکیب کننده ی ~ در Css3 اضافه شده است. بنابراین احتمالا ما نمی توانستیم از آن در برگه های استایل خود استفاده کنیم، اما خوشبختانه می توانیم از آن در جی کوئری، بدون نگرانی در مورد پشتیبانی شدن یا نشدن آن، استفاده کنیم. این ترکیب کننده، دقیقا مانند ترکیب کننده ی هم نیای مجاور یعنی علامت + عمل می کند به جز اینکه این ترکیب کننده، تمام هم نیاهایی که به دنبال آن می آیند را انتخاب می کند نه فقط عناصر مجاور را.

 اگر سلکتور زیر را بر روی کدهای بالا به کار ببریم، تمام عناصر li پس از li.selected انتخاب خواهند شد:

jQuery('li.selected ~ li');

 توضیحات

استفاده از ترکیب کننده ی هم نیا(sibling) کمی مشکل است، زیرا این ترکیب کننده از روش سلسله مراتب بالا به پایین(top-down hierarchical approach) که اکثر سلکتورها استفاده می کنند، استفاده نمی کند. اما هنوز هم یادگیری این ترکیب کننده ازش دارد و راه مفیدی برای انتخاب آنچه می خواهیم با حداقل درد سر است. اگر بخواهیم همین کار را بدون استفاده از سلکتور انجام دهیم، می توانیم به صورت زیر عمل کنیم:

jQuery('h1').next('h2');

 متد next() یک جایگزین خوب برای سلکتور بالایی است؛ و به خصوص وقتی که داریم با اشیاء جی کوئری(jQuery objects) به صورت متغیرها کار می کنیم، مفید است، بعنوان مثال:

var topHeaders = jQuery('h1');
topHeaders.next('h2').css('margin','0');

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