پیمایش به پایین (فرزندان)

پیمایش به پایین

دو متد برای پیدا کردن فرزندان یک عنصر:

مثال با ساختار تودرتو

<div class="box">
  <p>پاراگراف مستقیم</p>
  <span>
    <p>پاراگراف تودرتو (نوه)</p>
  </span>
</div>

// فقط p مستقیم: پاراگراف مستقیم
$("div.box").children("p").css("color", "red");

// همه pها در هر عمقی: هر دو پاراگراف
$("div.box").find("p").css("color", "blue");

// همه فرزندان (بدون سلکتور)
$("div.box").children().css("border", "1px solid gray");

children با فیلتر

// فقط فرزندان مستقیمی که کلاس active دارند
$("#menu").children(".active").css("font-weight", "bold");

// فقط فرزندان مستقیم li
$("#menu").children("li").css("list-style", "none");

مثال کاربردی: منوی درختی

// باز و بسته کردن زیرمنوها
$(".has-submenu > a").click(function(e) {
    e.preventDefault();
    $(this).parent()              // والد li
           .children(".submenu")  // زیرمنوی مستقیم
           .slideToggle();
});

مثال: هایلایت ستون جدول

// رنگی کردن همه سلول‌های سطر اول
$("table").find("tr:first td").css("background", "#4a7c59")
                              .css("color", "white");

مقایسه متدهای پیمایش به پایین

جمع‌بندی

• children() فرزندان مستقیم (یک سطح)
• find() همه فرزندان در هر عمقی — سلکتور اجباری دارد
• برای همه فرزندان: find("*")
• ترکیب با parent برای منوهای درختی رایج است