باستخدام jQuery ، يمكنك بسهولة تحديد عناصر HTML . لكن في بعض الأحيان، عندما تكون بنية HTML أكثر تعقيدًا، يكون تحسين العناصر التي نختارها أمرًا مزعجًا. في هذا البرنامج التعليمي، سوف نستكشف عشر طرق لتحسين وتوسيع المجموعات التي سنعمل معها.
HTML
أولا، دعونا نلقي نظرة على الصفحة البسيطة الموضحة أدناه، ومن خلال هذا البرنامج التعليمي سوف نقوم بتحديد العناصر.
" لماذا نحتاج إلى تحسين سلسلة من العناصر بشكل أكبر؟ هل يرجع ذلك إلى أن بناء جملة تحديد jQuery ليس قويًا بدرجة كافية؟ "
حسنًا، لنبدأ بمثال. في صفحة الويب المذكورة أعلاه، عند النقر على نجمة ، نحتاج إلى إضافة فئة "on" إليها وكل نجمة على اليسار . وفي الوقت نفسه، نريد تغيير لون الخلفية لجميع العناصر الرئيسية ذات النجمة ، بحيث يكون الكود الخاص بنا كما يلي:
في السطر الثاني، نحصل على الكائن الحالي الذي نقرنا عليه. ولكن كيف تحصل على والد النجوم ؟ هذا هو div. rating . ومع ذلك، في صفحة واحدة، هناك العديد من div. rating . أي واحد نريد؟ كيفية الحصول على كل النجوم على يسار "هذا" ؟
والخبر السار هو أن jQuery يسمح لنا بالحصول على مجموعات جديدة من العناصر بناءً على المجموعات الموجودة بناءً على هذه العلاقات الأساسية. وهنا يأتي دور وظائف الاجتياز.
1. الأطفال
تحصل هذه الوظيفة على الأطفال المباشرين لمجموعة من العناصر.
يمكن أن يكون هذا مناسبًا جدًا في العديد من المواقف، ألقِ نظرة على الصورة أدناه:
$('.star').انقر(وظيفة(){
$(this).addClass('on');
// كيفية تحديد العنصر الأصلي للكائن الحالي ؟
// كيفية الحصول على كل النجوم على يسار النجم الحالي ؟
});