التابع .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>foo</li>
<li>bar</li>
</ul>
فيمكنك تحديد عناصر القائمة والتكرار عبرها:
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
وبالتالي تُسجَّل رسالة لكل عنصر في القائمة:
0: foo
1: bar
ويمكنك إيقاف الحلقة من داخل دالة رد النداء عن طريق إعادة false.
ملاحظة: تتكرر معظم توابع jQuery التي تعيد كائن jQuery أيضًا عبر مجموعة العناصر في مجموعة jQuery، وهي عملية تُعرف بالتكرار الضمني (implicit iteration). عند حدوث ذلك، غالبًا ما يكون من غير الضروري التكرار بشكل صريح (explicitly) مع التابع .each()
التابع .each() غير ضروري في الشيفرة التالية، وبدلاً من ذلك، يجب أن نعتمد على التكرار الضمني:
$( "li" ).each(function() {
$( this ).addClass( "foo" );
});
$( "li" ).addClass( "bar" );
أمثلة
التكرار على ثلاثة <div> وضبط خاصية اللون لها:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>each demo</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>Click here</div>
<div>to iterate through</div>
<div>these 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 demo</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>(click here to change)</span>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Be merry</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 demo</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>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</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>