التابع .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>