ال كل() تحدد الطريقة في jQuery دالة يتم تشغيلها لكل عنصر مطابق. إنها إحدى طرق الاجتياز المستخدمة على نطاق واسع في JQuery. باستخدام هذه الطريقة، يمكننا التكرار على عناصر DOM الخاصة بكائن jQuery ويمكننا تنفيذ دالة لكل عنصر مطابق.
ال كل() يقبل المعلمة وظيفة (فهرس، عنصر) وهي وظيفة رد اتصال يتم تنفيذها لكل عنصر محدد. تتطلب هذه الوظيفة أيضًا بشكل اختياري معلمتين هما الفهرس والعنصر. لذلك، يتعين علينا تمرير وظيفة رد الاتصال إلى الأسلوب every().
يمكننا أيضا العودة خطأ شنيع من وظيفة رد الاتصال لإيقاف الحلقة مبكرًا.
بناء الجملة
$(selector).each(function(index, element))
قيمه المعامل
قيم المعلمات المستخدمة في كل() يتم تعريف الطريقة على النحو التالي.
الوظيفة (الفهرس، العنصر): إنها معلمة إلزامية. إنها وظيفة رد اتصال يتم تنفيذها لكل عنصر محدد. يحتوي على قيمتين للمعلمات تم تعريفهما على النحو التالي.
دعونا نرى بعض الرسوم التوضيحية لفهم كل() الطريقة بشكل واضح.
مثال 1
في هذا المثال، كل() سيتم تشغيل الطريقة عند النقر على الزر. نحن نطبق هذه الطريقة على الذي - التي عناصر. لذلك، سيتم تكرار هذه الطريقة على كل منها الذي - التي عنصر. يتم تنفيذ الوظيفة لكل محدد الذي - التي ويعرض نص المقابلة الذي - التي العنصر باستخدام مربع التنبيه.
هنا، نحن لا نستخدم قيم المعلمات لوظيفة رد الاتصال.
jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $('li').each(function(){ alert($(this).text()) }); }); } انتاج |
اختبره الآنبعد تنفيذ الكود أعلاه سيكون الناتج -
عند الضغط على الزر، سيتم عرض تنبيه على النحو التالي.
وبالمثل، سيتم عرض أربعة مربعات تنبيه بسبب وجود أربعة الذي - التي عناصر.
مثال2
في هذا المثال، نستخدم قيم المعلمات لوظيفة رد الاتصال فِهرِس و عنصر .
نحن نطبق كل() طريقة على الذي - التي عناصر. لذلك، سيتم تكرار الطريقة على عناصر li بدءًا من الفهرس 0 . سيتم تنفيذه على كل المحدد الذي - التي العنصر وتغيير لون خلفية العنصر المقابل.
يتوقف التكرار بمجرد عودة الدالة خطأ شنيع . هنا، هناك ستة الذي - التي العناصر، وتتوقف الوظيفة عندما تصل إلى العنصر الذي به المعرف = 'i4' . ورغم أنه العنصر الرابع إلا أن الفهرس يبدأ عند 0 ، وبالتالي فإن موضع العنصر هو 3 .
jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $('li').each(function(index, element) { $(element).css('background', 'lightgreen'); if ($(this).is('#i4')) { $('p').text('Index begins with 0. So, the function stopped at position: ' + index ).css('fontSize', '20px'); return false; } }); }); } انتاج |
اختبره الآنبعد تنفيذ الكود أعلاه والنقر على الزر المحدد، سيكون الإخراج -
