پیمایش (Traversing Reference)

در این صفحه رفرنس پیمایش عناصر jQuery را داری؛ یعنی لیستی از متدهایی که کمک می کنند از یک عنصر، به فرزندها، والدها، خواهرها و برادرها و بقیه اعضای خانواده اش در صفحه برسیم.

پیمایش عناصر jQuery یعنی چه؟

پیمایش (Traversing) یعنی حرکت بین عناصر مرتبط در صفحه. مثلا از یک آیتم لیست، بروی سراغ والدش، بعد بروی سراغ خواهرهایش. متدهای این جدول دقیقا همین کار را برای پیمایش عناصر jQuery انجام می دهند.

در این رفرنس، متدها فقط روی مجموعه انتخاب شده کار می کنند. یعنی اول با یک انتخاب گر، عناصر اولیه را می گیری، بعد با پیمایش بین آن ها جابه جا می شوی.

حرکت به فرزندان و نوادگان

چند متد برای رفتن به داخل یک عنصر وجود دارد؛ یعنی به بچه ها و نوادگانش.

• children() همه فرزندان مستقیم عنصر را برمی گرداند.
• contents() همه فرزندان مستقیم را برمی گرداند؛ حتی متن و کامنت.
• find() همه نوادگان را بر اساس انتخاب گر مشخص پیدا می کند.
• has() عناصری را برمی گرداند که داخلشان عنصر دیگری وجود دارد.
• each() روی هر عنصر از مجموعه یک تابع اجرا می کند.

نکته: وقتی می خواهی فقط بچه های ردیف اول را ببینی از children() استفاده کن. وقتی کل زیر درخت را می خواهی، find() مناسب است.

رفتن به والدها و اجداد

در خانواده عناصر، والد (Parent) و اجداد (Ancestors) هم مهم هستند. این متدها برای بالا رفتن در درخت صفحه اند.

• parent() فقط والد مستقیم عنصر را برمی گرداند.
• parents() همه اجداد عنصر را تا بالای صفحه برمی گرداند.
• parentsUntil() اجداد را بین دو شرط مشخص برمی گرداند.
• closest() نزدیک ترین جد که با انتخاب گر بخواند را برمی گرداند.
• offsetParent() اولین والد position دار را برمی گرداند.

مثلا در منوی چندلایه، می توانی از آیتم فعال به والدش برگردی. بعد با parents() کل مسیر تا ریشه منو را هم پیدا می کنی.

کار با خواهر و برادرها (Siblings)

خواهر و برادر (Sibling) یعنی عناصری که یک والد مشترک دارند؛ مثل چند لی آیتم داخل یک اول.

• next() خواهر بعدی عنصر را برمی گرداند.
• nextAll() همه خواهرهای بعدی را برمی گرداند.
• nextUntil() همه خواهرهای بعدی بین دو شرط را برمی گرداند.
• prev() خواهر قبلی عنصر را برمی گرداند.
• prevAll() همه خواهرهای قبلی را برمی گرداند.
• prevUntil() همه خواهرهای قبلی بین دو شرط را برمی گرداند.
• siblings() همه خواهر و برادرهای عنصر را برمی گرداند.

نکته: برای ساخت تب های افقی، معمولا از next()، prev() و siblings() کنار هم استفاده می شود.

کوچک کردن یا گسترش مجموعه عناصر

گاهی می خواهی مجموعه عنصرها را کوچک تر یا ترکیب کنی. متدهای این بخش دقیقا برای مدیریت خود لیست نتایج هستند.

• add() عناصر جدیدی به مجموعه فعلی اضافه می کند.
• addBack() مجموعه قبلی را دوباره به مجموعه فعلی اضافه می کند.
• andSelf() نسخه قدیمی و منسوخ addBack() است.
• filter() مجموعه را به عناصری که شرط را می گذرانند محدود می کند.
• not() عناصری را می دهد که شرط مشخص را ندارند.
• is() چک می کند آیا حداقل یک عنصر با شرط می خواند یا نه.
• eq() عنصر با اندیس مشخص را برمی گرداند.
• first() اولین عنصر مجموعه را برمی گرداند.
• last() آخرین عنصر مجموعه را برمی گرداند.
• slice() زیرمجموعه ای بر اساس بازه اندیس ها برمی گرداند.
• map() روی هر عنصر تابعی اجرا می کند و مجموعه جدیدی می سازد.
• end() آخرین فیلتر در زنجیره را لغو می کند و به حالت قبل برمی گردد.

این متدها مثل فیلترهای روی یک لیست دانش آموزان هستند. می توانی هر بار کمی متفاوت فیلتر کنی و با end() به حالت قبلی برگردی.

مثال ساده از پیمایش عناصر jQuery

در این مثال، از یک لیست شروع می کنیم. بعد با متدهای پیمایش، به والد و خواهر و برادرها و زیرمجموعه ها سر می زنیم.

var $item = $("ul.menu li.active");
var $parentList = $item.parent();
var $allSiblings = $item.siblings();
var $firstThreeSiblings = $allSiblings.slice(0, 3);
var $allDescendants = $parentList.find("li");
var $firstDescendant = $allDescendants.first();

مشاهده در ادیتور

اینجا از یک آیتم فعال شروع کردیم. با parent() به لیست والد رسیدیم. بعد همه خواهر و برادرها را گرفتیم و با slice() سه تای اول را برداشتیم. سپس با find() همه لی آیتم های داخل لیست را پیدا کردیم و با first() اولینشان را گرفتیم.

گام های عملی برای تمرین پیمایش

برای اینکه پیمایش عناصر jQuery توی ذهنت جا بیفتد، این تمرین سه مرحله ای را انجام بده.

1. در یک صفحه ساده، یک لیست چندسطحی با تگ های <ul> و <li> بساز.
2. با children() و find() فرق فرزندان مستقیم و نوادگان را ببین.
3. با parent()، parents() و siblings() در درخت لیست بالا و پایین برو.

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

پیوند پیمایش با بقیه رفرنس های jQuery

پیمایش عناصر jQuery به تنهایی کافی نیست. معمولا بعد از پیمایش، می خواهی HTML یا CSS عنصر را عوض کنی. برای این کار می توانی از متدهای صفحه HTML/CSS (HTML/CSS Reference) کمک بگیری.

همچنین برای انتخاب اولیه عناصر، رفرنس انتخاب گرها (Selectors Reference) پایه کار است. وقتی انتخاب گر خوب بنویسی، پیمایش هم ساده تر و تمیزتر می شود.

در نهایت، برای رویدادها مثل کلیک منو، رفرنس رویدادها (Events Reference) را کنار این رفرنس پیمایش نگه دار. این دو کنار هم منوها و رابط های تعاملی قوی می سازند.

اگر بخش آموزشی گام به گام می خواهی، صفحه پیمایش عناصر jQuery می تواند آموزش مفصل تری نسبت به این رفرنس خلاصه به تو بدهد.

جمع بندی سریع

• رفرنس پیمایش عناصر jQuery برای حرکت بین فرزندان، والدها و خواهرها است.
• children() و find() برای رفتن به داخل عناصر استفاده می شوند.
• parent()، parents() و closest() برای حرکت به سمت والدها هستند.
• next()، prev() و siblings() خواهر و برادرها را پیدا می کنند.
• filter()، not()، first() و last() مجموعه نتایج را دقیق تر می کنند.