التابع .each() في jQuery
.each( function )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
يكرر هذا التابع، عبر كائن jQuery، تنفيذ دالة لكل عنصر متطابق.
.each( function )
أُضيف مع الإصدار: 1.0.
function
دالة تُنفَّذ لكل عنصر متطابق، وهي على الشكل Function( Integer index, Element element ).
صُمِم التابع .each() لجعل بنية حلقات المرور على عناصر DOM موجزة وأقل عُرضةً للخطأ. عند استدعائه فإنه سيمر على جميع عناصر DOM التي تشكل جزءًا من كائن jQuery. في كل مرة تُشغل فيها دالة رد نداء، فسيُمرَّر تكرار الحلقة الحالي بدءًا من 0. الأهم من ذلك، تُطلّق دالة رد النداء مع تمرير سياق عنصر DOM الحالي إليها، وبالتالي تشير الكلمة المفتاحية this إلى العنصر.
لنفترض أن لديك قائمة بسيطة غير مرتبة في الصفحة:
<ul>
<li>حلوى</li>
<li>مشروبات</li>
</ul>
فيمكنك تحديد عناصر القائمة والتكرار عبرها:
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
وبالتالي تُسجَّل رسالة لكل عنصر في القائمة:
0: حلوى
1: مشروبات
ويمكنك إيقاف الحلقة من داخل دالة رد النداء عن طريق إعادة false.
ملاحظة: تتكرر معظم توابع jQuery التي تعيد كائن jQuery أيضًا عبر مجموعة العناصر في مجموعة jQuery، وهي عملية تُعرف بالتكرار الضمني (implicit iteration). عند حدوث ذلك، غالبًا ما يكون من غير الضروري التكرار بشكل صريح (explicitly) مع التابع .each()
التابع .each() غير ضروري في الشيفرة التالية، وبدلاً من ذلك، يجب أن نعتمد على التكرار الضمني:
$( "li" ).each(function() {
$( this ).addClass( "حلوى" );
});
$( "li" ).addClass( "مشروبات" );
أمثلة
التكرار على ثلاثة <div> وضبط خاصية اللون لها:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>each مثال على التابع</title>
<style>
div {
color: red;
text-align: center;
cursor: pointer;
font-weight: bolder;
width: 300px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>اضغط هنا</div>
<div>للتكرار خلال</div>
<div>هذه الـ divs.</div>
<script>
$( document.body ).click(function() {
$( "div" ).each(function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
</script>
</body>
</html>
للوصول إلى كائن jQuery بدلاً من عنصر DOM العادي، استخدم $( this ) . ومثال على ذلك:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>each مثال على التابع</title>
<style>
ul {
font-size: 18px;
margin: 0;
}
span {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.example {
font-style: italic;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
To do list: <span>(اضغط هنا للتغيير)</span>
<ul>
<li>يأكل</li>
<li>ينام</li>
<li>يبتهج</li>
</ul>
<script>
$( "span" ).click(function() {
$( "li" ).each(function() {
$( this ).toggleClass( "example" );
});
});
</script>
</body>
</html>
استخدم return false للخروج من حلقات each(). في وقت مبكر:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>each مثال على التابع</title>
<style>
div {
width: 40px;
height: 40px;
margin: 5px;
float: left;
border: 2px blue solid;
text-align: center;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>تغيير اللون</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">قف هنا</div>
<div></div>
<div></div>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" ).each(function( index, element ) {
// element == this
$( element ).css( "backgroundColor", "yellow" );
if ( $( this ).is( "#stop" ) ) {
$( "span" ).text( "Stopped at div index #" + index );
return false;
}
});
});
</script>
</body>
</html>