$(this) في jQuery: كيفية الحصول عليه وعدم الخلط

كيف تحصل على أطفال $(this) في jQuery؟ نشرحها ببساطة

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

هذا السؤال هو من أكثر الأسئلة شيوعاً على Stack Overflow. آلاف المطورين، من المبتدئين إلى المحترفين، يبحثون عن الإجابة. وليس من المستغرب: العمل مع $(this) وأطفاله هو الأساس الذي لا يمكن الاستغناء عنه. اليوم سنفهم مرة واحدة وإلى الأبد كيفية القيام بذلك بشكل صحيح وجميل وبدون أخطاء.

لماذا $(this).children() ليس حلاً سحرياً؟

الطريقة الأكثر وضوحاً هي دالة children(). إنها تُرجع فقط الأحفاد المباشرين (المستوى الأول من التداخل). يبدو منطقياً، لكن المبتدئين غالباً ما يتوقعون منها سحراً غير موجود.

// HTML:\n// <div id="parent">\n//   <span>حفيد مباشر</span>\n//   <div>\n//     <span>حفيد متداخل (لن يتم إرجاعه)</span>\n//   </div>\n// </div>\n\n$('#parent').click(function() {\n  // سيعيد فقط أول <span> و <div>\n  let directChildren = $(this).children();\n  console.log(directChildren.length); // 2\n});

مهم: children() لا تنظر داخل الكتل المتداخلة. إذا كنت بحاجة إلى جميع الأحفاد بأي عمق - استخدم find().

الطريقة رقم 1: الكلاسيكية - $(this).children()

متى تستخدم: عندما تحتاج فقط إلى العناصر الموجودة مباشرة داخل الكتلة الحالية. على سبيل المثال، لديك قائمة <ul> وتريد التكرار على عناصرها <li>.

// مثال: النقر على حاوية منتج\n$('.product-card').on('click', function() {\n  // الحصول على جميع العناصر الفرعية المباشرة للبطاقة\n  let kids = $(this).children();\n  \n  // التكرار والقيام بشيء ما\n  kids.each(function(index) {\n    $(this).addClass('highlighted');\n  });\n});

الميزة: يمكنك التصفية باستخدام محدد مباشرة في الاستدعاء:

// فقط <div> داخل العنصر الحالي\nlet divsOnly = $(this).children('div');

الطريقة رقم 2: البحث العميق - $(this).find()

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

// النقر على كتلة خبر\n$('.news-block').on('click', function() {\n  // سنجد جميع <img> داخلها، حتى لو كانت في عناوين فرعية\n  let images = $(this).find('img');\n  \n  images.each(function() {\n    // إضافة إطار لكل صورة\n    $(this).css('border', '2px solid red');\n  });\n});

الفرق عن children(): find() تجتاز شجرة DOM بأكملها داخل العنصر. children() - فقط المستوى الأول. تذكر القاعدة: "الأطفال هم الأطفال. Find هو جميع الأحفاد حتى الجيل السابع".

الطريقة رقم 3: JavaScript الأصلي - بدون jQuery

ماذا لو كنت تكتب بلغة JS نقية أو تريد تقليل الاعتماد على المكتبات؟ $(this) له نظير "أصلي" - this في معالج الحدث. وله أيضاً أطفال!

// JavaScript نقي\ndocument.querySelectorAll('.item').forEach(item => {\n  item.addEventListener('click', function() {\n    // الحصول على الأطفال المباشرين\n    let children = this.children; // HTMLCollection\n    \n    // تحويل إلى مصفوفة للسهولة\n    Array.from(children).forEach(child => {\n      child.style.backgroundColor = 'yellow';\n    });\n    \n    // أو البحث عن جميع الأحفاد باستخدام محدد\n    let allSpans = this.querySelectorAll('span');\n  });\n});