پیمایش بین عناصر DOM در جی کوئری

مسئله

فرض کنید یک مجموعه از عناصر DOM را انتخاب( select) کرده ایم، و می خواهیم بر اساس موقعیت انتخاب ها در داخل ساختار درخت DOM، بین عناصر پیمایش کنیم تا به یک مجموعه عناصر دیگر دسترسی پیدا کنیم.

به زبان ساده

فرض کنید با جی کوئری، یک مجموعه عناصر DOM را انتخاب کرده ایم، و مثلا می خواهیم از بین این عناصر، عنصر دوم را انتخاب کنیم، سپس با استفاده از متدهایی که خواهیم گفت، به دیگر عناصر دسترسی پیدا کنیم(بین عناصر انتخاب شده پیمایش کنیم).

راه حل

جی کوئری یک مجموعه از عناصر برای عبور بین عناصر انتخاب شده را به ما ارائه می دهد. بعنوان مثال، فرض کنید که کدهای HTML زیر را داریم:

<div>
<ul>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
</ul>
</div>

اکنون، ما می خواهیم با استفاده از انتخابگر اندیسی :eq() دومین عنصر <li> را انتخاب کنیم، به کدهای زیر توجه کنید:

// ها با اندیس انتخاب می کند. اندیس از 0 شروع می شود <li> عنصر دوم از مجموعه 
jQuery('li:eq(1)');

 اکنون ما یک نقطه ی شروع در داخل ساختار HTML داریم. نقطه ی شروع ما، دومین عنصر <li> است. از این نقطه ما می توانیم به دیگر عناصر بالایی یا پایینی یا غیره دسترسی پیدا کنیم. اکنون اجازه دهید چند متد پیمایش(traversing methods)  را معرفی کنیم که به ما امکان می دهد از این نقطه ی شروع، به دیگر عناصر رجوع یا پیمایش کنیم.

jQuery('li:eq(1)').next() // را انتخاب می کند <li> سومین عنصر
jQuery('li:eq(1)').prev() //را انتخاب می کند <li> اولین عنصر  
jQuery('li:eq(1)').parent() // را انتخاب می کند <ul> عنصر   
jQuery('li:eq(1)').parent().children() // را انتخاب می کند <li> تمام عناصر  
jQuery('li:eq(1)').nextAll() // را انتخاب می کند <li> پس از دومین  <li> تمام عناصر
jQuery('li:eq(1)').prevAll() // را انتخاب می کند <li> قبل از دومین <li> تمام عناصر

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

 دو مفهوم دیگر نیز وجود دارد که باید در مورد پیمایش ها بد انیم. اولین مفهوم و احتمالا واضح ترین مفهوم، این است که متدهای پیمایش می توانند به صورت زنجیروار(chained) به هم متصل شوند. اجازه دهید کدهای جی کوئری زیر را بررسی کنیم:

jQuery('li:eq(1)').parent().children() //selects all <li>'s

 توجه داشته باشید که ما از دومین عنصر <li> به عنصر والد <ul> پیمایش کردیم. و سپس از عنصر والد(parent) به تمام  عناصر فرزند از عنصر دسترسی پیدا کرده  و آنها را انتخاب می کنیم.  اکنون مجموعه عناصر(wrapper set) ما  حاوی تمام عناصر <li> است که در داخل عنصر <ul> قرار گرفته اند. البته این یک مثال ساختگی  برای اینکه بتوانیم متدهای پیمایش را به نمایش بگذاریم. آیا ما باید از عناصر <li> یک مجموعه عناصر(wrapper set) ایجاد کنیم؟ در حالی که بسیار ساده تر است که این عناصر <li>  را به صورت مستقیم مثلا با استفاده از دستور  jQuery('li') انتخاب نماییم.

 دومین مفهومی که باید به هنگام کار کردن با متدهای پیمایش(traversing)  به خاطر بسپاریم این است که بیشتر این متدها یک پارامتر اختیاری می پذیرند که با استفاده از آن می توانیم انتخاب ها(selections) را فیلتر کنیم. اجازه دهید دوباره به مثال برگردیم و ببینیم که چگونه می توانیم آن را تغییر دهیم تا تنها آخرین عنصر <li> به صورت انتخاب شده باقی بماند.

به خاطر داشته باشید که این یک مثال ساختگی است و هدفش آن است که نشان دهد که یک متد پیمایش چگونه می تواند به یک عبارت به منظور انتخاب یک عنصر خاص، پاس داده شود:

jQuery('li:eq(1)').parent().children(':last') //selects the last <li>

 جی کوئری متدهای اضافی زیادی را به ما ارائه می دهد، که در اینجا آنها را نیاورده ایم. اگر می خواهید یک لیست کامل از آنها داشته باشید، به این آدرس مراجعه کنید. این متدها در سراسر این کتاب مورد استفاده قرار گرفته اند.

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