پیمایش به بالا (والدها)

پیدا کردن والدهای عنصر با parent()، parents() و parentsUntil()

پیمایش درخت DOM

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

سه متد برای رفتن به بالا (پیدا کردن والدها):

متدکار
parent()فقط والد مستقیم عنصر
parents()همه والدها تا ریشه سند (html)
parentsUntil()همه والدها تا یک عنصر مشخص (بدون خودش)

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

<div style="width:300px">  (پدربزرگ)
  <ul>                    (والد)
    <li class="start">من</li>
  </ul>
</div>
// والد مستقیم li: یعنی ul
$("li.start").parent().css("border", "2px solid red");

// همه والدها: ul و div و body و html
$("li.start").parents().css("background", "lightyellow");

// والدها تا div (شامل div ولی نه body و html)
$("li.start").parentsUntil("div").css("color", "blue");

parent با فیلتر

// والد مستقیم، فقط اگر کلاس container داشته باشد
$("li").parent(".container").css("border", "1px solid green");

// همه والدهایی که div هستند
$("li").parents("div").css("background", "#eee");

closest: نزدیک‌ترین والد مطابق

متد closest() نزدیک‌ترین عنصر مطابق سلکتور را پیدا می‌کند — خود عنصر یا والدهایش را بررسی می‌کند:

// نزدیک‌ترین div والد (خیلی کاربردی!)
$(this).closest("div").css("background", "yellow");

// نزدیک‌ترین tr والد (برای جدول‌ها)
$(this).closest("tr").remove();
تفاوت closest و parents: closest() از خود عنصر شروع می‌کند و فقط یک نتیجه می‌دهد؛ parents() از والد شروع می‌کند و همه والدهای مطابق را می‌دهد.

مثال کاربردی: حذف ردیف جدول

// هر دکمه حذف، ردیف (tr) خودش را حذف می‌کند
$(".delete-row").click(function() {
    $(this).closest("tr").fadeOut(400, function() {
        $(this).remove();
    });
});

جمع‌بندی

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

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