التصفية المتقدّمة باستخدام .filter()
استكشف الإمكانات الكاملة للأسلوب .filter()، باستخدام الدوال لتطبيق منطق مخصّص وتحديد العناصر استنادًا إلى خصائص أو علاقات ديناميكية.
التصفية المتقدّمة باستخدام .filter() درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.
تحسين التحديد باستخدام .filter()
تُعد الطريقة .filter() في jQuery وسيلة قوية لتضييق مجموعة موجودة من العناصر المحددة. فهي تساعدك على الاحتفاظ بالعناصر التي تستوفي معايير محددة فقط.
فكّر فيها بوصفها طبقة ثانية من التحديد تُطبّق بعد التحديد الأولي لتحقيق دقة أكبر.
التصفية الأساسية باستخدام المحددات
أبسط طريقة لاستخدام .filter() هي تمرير سلسلة محدد CSS إليها. يعمل ذلك مثل أي محدد عادي، لكنه يُطبّق فقط على العناصر الموجودة مسبقًا في مجموعة jQuery الحالية.
لنحدد جميع عناصر div ذات الصنف .item، ثم نُصفّيها للاحتفاظ بالعناصر التي تحتوي أيضًا على الصنف .active.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="item">Item 1</div>
<div class="item active">Item 2</div>
<div class="item">Item 3</div>
<div class="item active">Item 4</div>
<script>
$(document).ready(function(){
// Select all divs with class 'item'
var allItems = $('div.item');
// Then filter to keep only those with class 'active'
var activeItems = allItems.filter('.active');
activeItems.css('color', 'blue');
});
</script>
</body>
</html>منطق مخصّص باستخدام دالة
تظهر القوة الحقيقية للطريقة .filter() عند تمرير دالة إليها كمعامل. يتيح لك ذلك تطبيق منطق مخصّص وديناميكي بدرجة كبيرة على كل عنصر في التحديد.
- تُشغَّل الدالة لكل عنصر في مجموعة jQuery الحالية.
- تتلقى معاملين:
index(موضع العنصر في المجموعة) وelement(عنصر DOM الخام). - أعد
trueللاحتفاظ بالعنصر، وfalseلإزالته من المجموعة المُصفّاة.
التصفية حسب موضع الفهرس
يمكنك استخدام المعامل index في دالة التصفية لتحديد العناصر استنادًا إلى موضعها ضمن مجموعة jQuery الحالية. يفيد ذلك في مهام مثل تحديد كل عنصر ثانٍ أو نطاقات معينة.
لنحدد كل عنصر ثانٍ في القائمة (أي العناصر ذات الفهارس الزوجية بدءًا من 0) ثم نميّزها.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function(index) {
// Keep items at even indices (0, 2, 4...)
return index % 2 === 0;
}).css('background-color', 'lightgreen');
});
</script>
</body>
</html>استنادًا إلى السمات والخصائص
يتيح لك المعامل element (أو $(this) داخل الدالة) فحص خصائص كل عنصر من عناصر DOM وسماته ومحتواه النصي. ويتيح ذلك إجراء تصفية دقيقة للغاية.
سنبحث هنا عن جميع عناصر القائمة التي تحتوي في نصها على الكلمة "Important" ونجعلها عريضة.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Task 1</li>
<li>Important Task 2</li>
<li>Task 3</li>
<li>Another Important Task 4</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the text content includes "Important"
return $(this).text().includes('Important');
}).css('font-weight', 'bold');
});
</script>
</body>
</html>التصفية الديناميكية باستخدام البيانات
تُعد سمات البيانات في HTML5 (مثل data-status="active") مثالية لتخزين معلومات إضافية خاصة بالتطبيق مباشرةً داخل العناصر. يمكنك استخدام .filter() لتحديد العناصر استنادًا إلى قيم البيانات المخصّصة هذه.
لنميّز عناصر القائمة التي تم تحديد حالتها على أنها 'complete' باستخدام سمة data-status.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li data-status="pending">Task A</li>
<li data-status="complete">Task B</li>
<li data-status="pending">Task C</li>
<li data-status="complete">Task D</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check the 'data-status' attribute
return $(this).data('status') === 'complete';
}).css('text-decoration', 'line-through');
});
</script>
</body>
</html>التصفية حسب العنصر التابع أو الأصل
يمكن لدالة التصفية أيضًا فحص العلاقات بين العناصر. على سبيل المثال، قد ترغب في تحديد العناصر الأصلية التي تحتوي على عنصر تابع معين، أو العكس.
سنبحث هنا عن عناصر القائمة التي تحتوي داخلها على وسم <img> ونضيف إليها حدًا.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Text only</li>
<li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
<li>Another text item</li>
<li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the current <li> contains an <img>
return $(this).find('img').length > 0;
}).css('border', '2px solid orange');
});
</script>
</body>
</html>التصفية المعقدة باستخدام المنطق
داخل دالة التصفية، يمكنك دمج شروط متعددة باستخدام عوامل JavaScript المنطقية العادية مثل && (و) و|| (أو).
يتيح ذلك إجراء تحديد دقيق جدًا استنادًا إلى عدة معايير في الوقت نفسه، مما يجعل التصفية قوية للغاية:
- هل هو مرئي؟ و هل يحمل صنفًا محددًا؟
- هل يحتوي على النص 'X'؟ أو هل يحمل سمة البيانات 'Y'؟
التصفية الديناميكية في العالم الحقيقي
لنطبّق معًا ما تعلمناه. تخيّل تصفية قائمة من المنتجات استنادًا إلى معايير متعددة. يمكن لدالة التصفية التحقق من عدة شروط ديناميكيًا.
يميز هذا المثال المنتجات المرئية والتي تنتمي في الوقت نفسه إلى فئة 'electronics'، باستخدام منطق مدمج داخل دالة التصفية.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div class="product" data-category="electronics">Laptop</div>
<div class="product hidden" data-category="books">Novel</div>
<div class="product" data-category="electronics">Mouse</div>
<div class="product" data-category="books">Textbook</div>
<script>
$(document).ready(function(){
$('div.product').filter(function() {
// Filter products that are visible AND in 'electronics' category
var isVisible = $(this).is(':visible');
var isElectronics = $(this).data('category') === 'electronics';
return isVisible && isElectronics;
}).css('background-color', 'lightblue');
});
</script>
</body>
</html>تحدي التصفية
بالنظر إلى HTML التالي <li class="item special" data-value="10">...</li>، أي دالة .filter() تحدد بشكل صحيح فقط عناصر <li> التي تحمل الصنف .special وقيمة data-value أكبر من 5؟
مراجعة: قوة التصفية الديناميكية
لقد أتقنت الآن الاستخدامات المتقدمة للطريقة .filter() في jQuery!
- تُحسّن التحديدات الموجودة، مما يوفر تحكمًا دقيقًا.
- يتيح استخدام دالة تطبيق منطق تصفية ديناميكي ومعقد.
- يمكنك فحص الفهارس وخصائص العناصر وسمات البيانات والعلاقات.
- ادمج شروطًا متعددة باستخدام
&&(و) و||(أو) لإنشاء معايير محددة للغاية.
تتيح لك هذه الطريقة القوية إنشاء واجهات مستخدم شديدة الاستجابة ومدفوعة بالبيانات.
تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 22
- الدروس
- 48
الأسئلة الشائعة
هل درس «التصفية المتقدّمة باستخدام .filter()» مجاني؟
نعم — نص درس «التصفية المتقدّمة باستخدام .filter()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.
ماذا ستتعلم في «التصفية المتقدّمة باستخدام .filter()»؟
استكشف الإمكانات الكاملة للأسلوب .filter()، باستخدام الدوال لتطبيق منطق مخصّص وتحديد العناصر استنادًا إلى خصائص أو علاقات ديناميكية. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «التصفية المتقدّمة باستخدام .filter()»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إنشاء محدّدات زائفة مخصّصة
- التصفية المتقدّمة باستخدام .filter()
- استبعاد العناصر باستخدام .not()