پیمایش افقی (هم‌سطح‌ها)

پیدا کردن هم‌سطح‌ها با siblings()، next()، prev() و متدهای مرتبط

پیمایش هم‌سطح

عناصری که والد مشترک دارند، هم‌سطح (sibling) نامیده می‌شوند. jQuery هفت متد برای پیمایش افقی دارد:

متدکار
siblings()همه هم‌سطح‌ها (بدون خود عنصر)
next()فقط هم‌سطح بعدی
prev()فقط هم‌سطح قبلی
nextAll()همه هم‌سطح‌های بعدی
prevAll()همه هم‌سطح‌های قبلی
nextUntil()هم‌سطح‌های بعدی تا یک عنصر
prevUntil()هم‌سطح‌های قبلی تا یک عنصر

مثال با لیست

<ul>
  <li>آیتم ۱</li>
  <li class="start">آیتم ۲ (شروع)</li>
  <li>آیتم ۳</li>
  <li>آیتم ۴</li>
  <li>آیتم ۵</li>
</ul>
// همه هم‌سطح‌ها: آیتم ۱، ۳، ۴، ۵
$("li.start").siblings().css("color", "gray");

// هم‌سطح بعدی: آیتم ۳
$("li.start").next().css("color", "red");

// هم‌سطح قبلی: آیتم ۱
$("li.start").prev().css("color", "blue");

// همه بعدی‌ها: آیتم ۳، ۴، ۵
$("li.start").nextAll().css("background", "#eee");

// بعدی‌ها تا آیتم ۴: آیتم ۳ (و ۴)
$("li.start").nextUntil("li:last-child").css("font-style", "italic");

فیلتر روی هم‌سطح‌ها

// فقط هم‌سطح‌هایی که کلاس active دارند
$(this).siblings(".active").removeClass("active");

// هم‌سطح بعدی فقط اگر div باشد
$(this).next("div").css("border", "1px solid red");

مثال کاربردی: تب‌ها (Tabs)

الگوی تب‌ها یکی از بهترین مثال‌های استفاده از siblings است:

$(".tab-btn").click(function() {
    // حذف active از همه دکمه‌ها و افزودن به این یکی
    $(this).addClass("active").siblings().removeClass("active");

    // نمایش پنل مربوطه
    var panelId = $(this).attr("data-target");
    $(panelId).show().siblings(".tab-panel").hide();
});

مثال: گالری تصاویر

// هایلایت تصویر کلیک‌شده و کم‌رنگ کردن بقیه
$("#gallery img").click(function() {
    $(this).css("opacity", 1)
           .siblings("img").css("opacity", 0.4);
});

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط