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

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

پیمایش خواهر و برادرها در درخت DOM

درخت DOM یا Document Object Model ساختار درختی تمام تگ ها است. خواهر و برادرها (Siblings) عناصری هستند که والد مشترک دارند. یعنی هر دو مستقیم زیر یک تگ والد قرار گرفته اند.

در این صفحه روی پیمایش خواهر و برادرها تمرکز می کنیم. در صفحه فرزندان (Descendants) رو به پایین می رفتیم. در صفحه اجداد (Ancestors) رو به بالا حرکت می کردیم.

نکته: پیمایش خواهر و برادرها کمک می کند بین عناصری هم سطح جابه جا شوی. مثل حرکت بین ردیف های هم کلاس کنار خودت.

متد siblings() برای همه خواهر و برادرها

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

در مثال منبع، همه خواهر و برادرهای هر تگ <h2> برگردانده می شوند:

$(document).ready(function() {
  $("h2").siblings();
});

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

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

حالا می توانیم روی این خواهر و برادرها استایل بگذاریم. مثلاً رنگ متنشان را عوض کنیم یا کلاس جدید اضافه کنیم.

متد siblings() یک پارامتر انتخاب گر هم می گیرد. با این پارامتر می توانی فقط برخی خواهر و برادرها را نگه داری.

در مثال زیر، فقط خواهر و برادرهای <h2> که تگ <p> هستند گرفته می شوند:

$(document).ready(function() {
  $("h2").siblings("p");
});

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

در اینجا siblings("p") یعنی فقط خواهر و برادرهایی که تگ p هستند. مثل وقتی که از بین هم کلاسی هایت، فقط دوستان صمیمی ات را صدا می زنی.

متد next() برای خواهر یا برادر بعدی

متد next() فقط خواهر یا برادر بعدی را برمی گرداند. یعنی عنصری که بلافاصله بعد از عنصر فعلی آمده است.

در مثال منبع، فقط عنصر بعدی بعد از هر h2 گرفته می شود:

$(document).ready(function() {
  $("h2").next();
});

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

اینجا شبیه این است که از جای خودت در نیمکت، فقط نفر سمت راستت را انتخاب کنی. این نفر همان next است.

متد nextAll() برای تمام عناصر بعدی

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

در مثال منبع، تمام عناصر بعد از h2 انتخاب می شوند:

$(document).ready(function() {
  $("h2").nextAll();
});

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

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

متد nextUntil() برای محدوده خواهر و برادرها

متد nextUntil() همه خواهر و برادرهای بعدی را، تا رسیدن به یک انتخاب گر خاص، برمی گرداند. خودش عنصر پایانی را شامل نمی شود.

در مثال منبع، همه عناصر بین h2 و h6 گرفته می شوند:

$(document).ready(function() {
  $("h2").nextUntil("h6");
});

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

یعنی از h2 شروع می کند و جلو می رود تا به h6 برسد. تمام خواهر و برادرهای بین این دو در نتیجه هستند. خود h6 نیست.

نکته: nextUntil() زمانی مفید است که مشخص است تا کجا می خواهی جلو بروی. مثل این که بگویی همه صندلی های بعد از من تا صندلی معلم را حساب کن.

متدهای prev(), prevAll(), prevUntil()

متدهای prev()، prevAll() و prevUntil() دقیقاً شبیه گروه next کار می کنند. فقط جهت حرکت برعکس است و به عقب می روند.

prev() فقط خواهر یا برادر قبلی را می گیرد. prevAll() همه عناصر قبلی را تا ابتدا می گیرد. prevUntil() همه عناصر قبلی را تا رسیدن به یک انتخاب گر مشخص برمی گرداند.

به زبان ساده، next* به سمت پایین لیست حرکت می کند. prev* به سمت بالا در همان لیست حرکت می کند. این دو گروه با هم پیمایش خواهر و برادرها را کامل می کنند.

برای مرور لیست کامل متدهای پیمایش، می توانی به مرجع jQuery Traversing Reference سر بزنی. آنجا تمام متدهای پیمایش، از جمله پیمایش خواهر و برادرها، فهرست شده اند.

تمرین مرحله به مرحله پیمایش خواهر و برادرها

برای تمرین پیمایش خواهر و برادرها درخت DOM، یک بخش ساده از صفحه انتخاب کن. مثلاً یک جعبه متن با چند عنوان و پاراگراف کنار هم.

1. یک تگ عنوان مثل <h2> را با jQuery انتخاب کن.
2. با siblings() همه خواهر و برادرهایش را ببین و بررسی کن.
3. با siblings("p") فقط پاراگراف های هم سطحش را انتخاب کن.
4. با next() فقط عنصر بعدی h2 را ببین.
5. با nextAll() و nextUntil() محدوده های مختلف را بررسی کن.

با این تمرین، پیمایش خواهر و برادرها برایت طبیعی می شود. در کنار این صفحه، مطالعه پیمایش در صفحه (Traversing) هم تصویر کامل تری از حرکت درخت DOM می دهد.

جمع بندی سریع

• پیمایش خواهر و برادرها یعنی حرکت افقی روی عناصر هم سطح.
• siblings() همه خواهر و برادرهای یک عنصر را برمی گرداند.
• next* به سمت جلو و prev* به سمت عقب حرکت می کنند.
• nextUntil() و prevUntil() برای انتخاب محدوده ای از عناصر هستند.
• می توانی با پارامتر انتخاب گر، نتایج خواهر و برادرها را فیلتر کنی.