jQuery والتعامل مع DOM

التنقل لأعلى في شجرة DOM

12 دقيقة الدرس 6 من 30

فهم التنقل لأعلى في شجرة DOM

يتيح لك التنقل في DOM التحرك عبر بنية HTML بدءًا من عنصر محدد. عند التنقل لأعلى في شجرة DOM، فإنك تنتقل من عنصر فرعي نحو أسلافه - الأب، الجد، وما بعده.

توفر jQuery عدة طرق قوية للتنقل لأعلى، كل منها يخدم أغراضًا مختلفة حسب المسافة التي تحتاج للصعود إليها وما تبحث عنه.

لماذا التنقل لأعلى؟

العثور على الحاويات: تحديد موقع الأقسام الرئيسية، البطاقات، أو الأغلفة
تعديل الأسلاف: تغيير الفئات أو الأنماط على العناصر الأبوية
تفويض الأحداث: الوصول إلى العناصر الأبوية من معالجات الأحداث
الوعي بالسياق: تحديد القسم أو المكون الذي ينتمي إليه العنصر

ملاحظة: طرق التنقل لأعلى تتحرك من الطفل إلى الأب، لا تتحرك جانبيًا أو للأسفل أبدًا. إنها ضرورية لفهم سياق العنصر داخل بنية الصفحة.

طريقة parent()

تُرجع طريقة parent() الأب المباشر لكل عنصر في المجموعة المطابقة. إنها تصعد بالضبط مستوى واحد في شجرة DOM.

بنية HTML:
<div class="container">
    <ul class="menu">
        <li class="menu-item">
            <a href="#" class="link">الرئيسية</a>
        </li>
    </ul>
</div>

jQuery:
// الحصول على الأب المباشر للرابط (يُرجع <li>)
$(".link").parent();

// الحصول على الأب وإضافة فئة
$(".link").parent().addClass("active");

// الحصول على الأب مع تصفية بمحدد
$(".link").parent(".menu-item").css("font-weight", "bold");

نصيحة: يمكنك تمرير محدد إلى parent() لتصفية النتائج. إذا لم يطابق الأب المباشر المحدد، فلن يتم إرجاع أي عناصر.

طريقة parents()

على عكس parent()، تُرجع طريقة parents() جميع الأسلاف لكل عنصر، وتصل حتى جذر المستند. هذا مفيد عندما تحتاج إلى العثور على سلف معين لكنك لا تعرف كم مستوى للأعلى هو.

بنية HTML:
<div class="page">
    <section class="content">
        <article class="post">
            <p class="text">مرحبا بالعالم</p>
        </article>
    </section>
</div>

jQuery:
// الحصول على جميع الأسلاف (يُرجع article, section, div, body, html)
$(".text").parents();

// الحصول فقط على أسلاف div
$(".text").parents("div");

// الحصول على سلف القسم .content
$(".text").parents(".content").css("background", "#f0f0f0");

// الحصول على جميع الأسلاف حتى (لكن دون تضمين) عنصر معين
$(".text").parentsUntil(".page");

طريقة parentsUntil()

تُرجع طريقة parentsUntil() جميع الأسلاف بين العنصر الحالي وسلف محدد (دون تضمين نقطة التوقف). هذا مثالي لتحديد نطاق من الأسلاف.

مثال:
<div class="wrapper">
    <div class="section">
        <div class="card">
            <span class="badge">جديد</span>
        </div>
    </div>
</div>

jQuery:
// الحصول على جميع الآباء من .badge حتى (دون تضمين) .wrapper
// يُرجع: .card و .section
$(".badge").parentsUntil(".wrapper");

// إضافة فئة إلى جميع الآباء الوسطى
$(".badge").parentsUntil(".wrapper").addClass("highlight");

// مع محدد تصفية إضافي
$(".badge").parentsUntil(".wrapper", "div").css("border", "1px solid blue");

طريقة closest()

طريقة closest() هي واحدة من أكثر طرق التنقل فائدة. تبحث عن أقرب سلف (بما في ذلك العنصر نفسه) يطابق المحدد، ثم تتوقف. تُرجع عنصرًا واحدًا على الأكثر لكل عنصر بداية.

بنية HTML:
<div class="modal">
    <div class="modal-content">
        <button class="close-btn">×</button>
    </div>
</div>

jQuery:
// العثور على أقرب سلف .modal
$(".close-btn").closest(".modal");

// استخدام عملي: إغلاق النافذة المنبثقة عند النقر على الزر
$(".close-btn").on("click", function() {
    $(this).closest(".modal").hide();
});

// العثور على أقرب عنصر قائمة
$("a").closest("li").addClass("active");

نصيحة: closest() تبدأ بالعنصر نفسه، لذا $(".menu").closest(".menu") يُرجع .menu. استخدم parent() إذا كنت تريد تخطي العنصر الحالي.

مثال عملي: التنقل المتداخل

HTML:
<nav class="main-nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">المنتجات</a>
            <ul class="dropdown">
                <li><a href="#" class="sub-link">أجهزة اللابتوب</a></li>
                <li><a href="#" class="sub-link">الهواتف</a></li>
            </ul>
        </li>
    </ul>
</nav>

jQuery:
// إظهار القائمة المنسدلة عند التمرير فوق عنصر التنقل
$(".nav-link").hover(
    function() {
        // العثور على الأب li وإظهار القائمة المنسدلة الخاصة به
        $(this).parent().find(".dropdown").slideDown();
    },
    function() {
        $(this).parent().find(".dropdown").slideUp();
    }
);

// تمييز nav-item بالكامل عند النقر على sub-link
$(".sub-link").on("click", function() {
    $(this).closest(".nav-item").addClass("active");
});

مثال عملي: التحقق من صحة النموذج

HTML:
<form class="contact-form">
    <div class="form-group">
        <label>البريد الإلكتروني</label>
        <input type="email" class="form-input" name="email">
        <span class="error-message"></span>
    </div>
</form>

jQuery:
$(".form-input").on("blur", function() {
    var value = $(this).val();
    var formGroup = $(this).closest(".form-group");

    if (value === "") {
        formGroup.addClass("has-error");
        formGroup.find(".error-message").text("هذا الحقل مطلوب");
    } else {
        formGroup.removeClass("has-error");
        formGroup.find(".error-message").text("");
    }
});

جدول المقارنة

الطريقة	تُرجع	الأفضل استخدامها لـ
`parent()`	الأب المباشر فقط	عندما تعرف أن الأب على مستوى واحد للأعلى
`parents()`	جميع الأسلاف	العثور على جميع الأسلاف المطابقة
`parentsUntil()`	الأسلاف حتى نقطة توقف	تحديد نطاق من الأسلاف
`closest()`	أقرب سلف مطابق	العثور على أقرب حاوية/غلاف

خطأ شائع: تذكر أن parent() مع محدد لا يطابق الأب المباشر تُرجع مجموعة فارغة، وليس أقرب سلف مطابق. استخدم closest() أو parents() لذلك.

تمرين عملي

السيناريو: إنشاء أكورديون قابل للطي حيث يؤدي النقر على رأس إلى تبديل لوحة المحتوى الخاصة به.

بنية HTML:

<div class="accordion">
    <div class="accordion-item">
        <h3 class="accordion-header">القسم 1</h3>
        <div class="accordion-content">المحتوى هنا...</div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header">القسم 2</h3>
        <div class="accordion-content">المحتوى هنا...</div>
    </div>
</div>
    

مهمتك:

عند النقر على .accordion-header، ابحث عن أبيه .accordion-item
قم بتبديل .accordion-content داخل ذلك العنصر
أضف فئة "active" إلى الأب .accordion-item
أغلق عناصر الأكورديون الأخرى (انتقل لأعلى إلى .accordion، ثم عُد للأسفل)

تلميح: استخدم parent() للحصول على accordion-item، و siblings() (الدرس التالي!) للحصول على العناصر الأخرى.

النقاط الرئيسية

parent() تصعد بالضبط مستوى واحد - سريعة ومحددة
parents() تُرجع جميع الأسلاف - استخدمها مع محدد للتصفية
parentsUntil() مثالية لتحديد نطاق بين نقطتين
closest() هي الأكثر استخدامًا - تجد أقرب سلف مطابق بكفاءة
جميع الطرق تقبل محددات اختيارية لتصفية النتائج
التنقل لأعلى ضروري لتفويض الأحداث والتعديلات السياقية