تحديد وتغيير لون العناصر بين نطاق معين في jQuery

كيفية تحديد بعض العناصر في نطاق معين باستخدام jQuery وتغيير لون العناصر

لتحديد العناصر داخل نطاق معين في jQuery وتغيير لونها، يمكنك استخدام الاتي:

javascriptCopy code
$(document).ready(function() {
    // تحديد العناصر في النطاق المحدد
    var start = $('.test1').find('p').filter(':contains("2")'); // العنصر الأول
    var end = $('.test1').find('p').filter(':contains("10")'); // العنصر الأخير
    
    // إضافة لون جديد للعناصر
    var newColor = 'yellow';

    // حلق عبر العناصر بين العنصرين الأول والأخير وقم بتغيير لون العناصر
    var inRange = false;
    $('.test1').find('p, a').each(function() {
        if ($(this).is(start)) {
            inRange = true;
        }
        if (inRange) {
            $(this).css('color', newColor);
        }
        if ($(this).is(end)) {
            inRange = false;
        }
    });
});

هذا الكود يستخدم jQuery لتحديد العناصر بين العنصرين الأول والأخير (التي تحمل القيم “2” و “10” على التوالي) ثم يقوم بتغيير لون العناصر إلى اللون الأصفر. يتم ذلك عن طريق حلقة تمر عبر كل العناصر في النطاق المحدد وتقوم بتغيير لونها إذا كانت داخل النطاق.

يجب ملاحظة أن هذا الحل يعتمد على وجود عناصر p و a بالفعل داخل العنصر .test1 ويتم تغيير لون العناصر التي تم العثور عليها داخل النطاق.

لفهم كيفية تحديد بعض العناصر في نطاق معين باستخدام jQuery وتغيير لونها، يجب أن نعتبر الهيكل العام للصفحة وكيفية تنظيم العناصر فيها. في المثال الذي قدمته، لدينا عناصر مختلفة داخل عنصر div يحمل فئة “test1”. النطاق الذي ترغب في تغيير لون العناصر داخله هو من عنصر p الذي يحتوي على “2” إلى عنصر p الذي يحتوي على “10”.

تحديد العناصر في النطاق المحدد:

1. استخدام filter(':contains("2")') للعثور على العنصر p الذي يحتوي على “2”، وهو العنصر الأول في النطاق.
2. استخدام filter(':contains("10")') للعثور على العنصر p الذي يحتوي على “10”، وهو العنصر الأخير في النطاق.

تغيير لون العناصر:

1. تعريف متغير newColor لتحديد اللون الجديد الذي ترغب في تغيير العناصر إليه.
2. استخدام حلقة each لتحديد العناصر بين العنصرين الأول والأخير، وتغيير لونها إلى اللون الجديد.

هذا الحل يعمل على فرض أن العناصر التي تحتوي على “2” و “10” هي العناصر الأول والأخير في النطاق المحدد، ولذلك يعتمد على ترتيب العناصر في الصفحة. إذا كانت العناصر الفعلية التي ترغب في تغيير لونها تختلف، فسيحتاج الحل إلى تعديلات لتحديد العناصر بشكل صحيح.