jQuery تدوير - طريقة filter()

jQuery 遍历参考手册

مثال

تغيير لون جميع divs، ثم إضافة حواف إلى الصنف "middle":

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

تجربة شخصية

تعريف واستخدام

يقلل أسلوب filter() مجموعة العناصر التي تطابق المبدأ المحدد.

النحو

.filter(مبدأ)
المعلمات وصف
مبدأ قيمة سلسلة، تحتوي على تعبير المبدأ الذي سيتم استخدامه للفرز.

شرح مفصل

إذا كان هناك جسم jQuery يمثل مجموعة عناصر DOM، فإن أسلوب .filter() سيقوم بإنشاء جسم jQuery جديد يتكون من مجموعة فرعية من العناصر التي تطابق المبدأ المستخدم. سيتم اختبار كل عنصر باستخدام المبدأ، وسيتم تضمين جميع العناصر التي تطابق المبدأ في النتيجة.

فكر في هذه الصفحة البسيطة التي تحتوي على قائمة:

<ul>
  <li>نقطة قائمة 1</li>
  <li>نقطة قائمة 2</li>
  <li>نقطة قائمة 3</li>
  <li>نقطة قائمة 4</li>
  <li>نقطة قائمة 5</li>
  <li>نقطة قائمة 6</li>
</ul>

يمكننا تطبيق هذا الأسلوب على مجموعة هذه العناصر من القائمة:

$('li').filter(':even').css('background-color', 'red');

تجربة شخصية

نتيجة هذا النداء هي إعداد لون الخلفية للمشاريع 1، 3، 5 إلى الأحمر، لأنها تطابق المبدأ (تذكر، :even و :odd تستخدم المؤشر القائم على 0).

استخدام الدالة الفرز

استخدام شكل ثاني من هذا الأسلوب هو من خلال الدالة وليس الم的选择ق لفرز العناصر. إذا كان الدالة تعود true بالنسبة لكل عنصر، فإن العنصر سيتم تضمينه في مجموعة الفرز الجديدة؛ وإلا سيتم استبعاده.

انظر إلى هذا الجزء من HTML المعقدة المقدمة أدناه:

<ul>
  <li><strong>قائمة</strong> نقطة 1 - علامة قوية واحدة</li>
  <li><strong>قائمة</strong> نقطة <strong>2</strong>
   - اثنان <span>أعمدة قوية</span></li>
  <li>نقطة قائمة 3</li>
  <li>نقطة قائمة 4</li>
  <li>نقطة قائمة 5</li>
  <li>نقطة قائمة 6</li>
</ul>

يمكننا اختيار هذه العناصر من القائمة، ثم فرزها بناءً على محتواها:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

jQuery 遍历参考手册