الفرق بين المراجعتين ل"jQuery/each"
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.each()</code> في jQuery}}</noinclude> == .each( functio...') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.each()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:التابع <code>.each()</code> في jQuery}}</noinclude> | ||
| − | == .each( function ) == | + | == <code>.each( function )</code> == |
=== القيمة المعادة === | === القيمة المعادة === | ||
| سطر 11: | سطر 11: | ||
أُضيف مع الإصدار: [http://api.jquery.com/category/version/ 1.0]. | أُضيف مع الإصدار: [http://api.jquery.com/category/version/ 1.0]. | ||
| − | ==== function ==== | + | ==== <code>function</code> ==== |
دالة تُنفَّذ لكل عنصر متطابق، وهي على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Integer|Integer]] index, [[JavaScript/Element|Element]] element )</code>. | دالة تُنفَّذ لكل عنصر متطابق، وهي على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Integer|Integer]] index, [[JavaScript/Element|Element]] element )</code>. | ||
| − | صُمِم التابع <code>.each()</code> لجعل بنية حلقات DOM موجزة وأقل عُرضةً للخطأ. عند استدعائه فإنه | + | صُمِم التابع <code>.each()</code> لجعل بنية حلقات المرور على عناصر DOM موجزة وأقل عُرضةً للخطأ. عند استدعائه فإنه سيمر على جميع عناصر DOM التي تشكل جزءًا من كائن jQuery. في كل مرة تُشغل فيها دالة رد نداء، فسيُمرَّر تكرار الحلقة الحالي بدءًا من 0. الأهم من ذلك، تُطلّق دالة رد النداء مع تمرير سياق عنصر DOM الحالي إليها، وبالتالي تشير الكلمة المفتاحية <code>[[JavaScript/this|this]]</code> إلى العنصر. |
لنفترض أن لديك قائمة بسيطة غير مرتبة في الصفحة:<syntaxhighlight lang="html"> | لنفترض أن لديك قائمة بسيطة غير مرتبة في الصفحة:<syntaxhighlight lang="html"> | ||
| سطر 25: | سطر 25: | ||
console.log( index + ": " + $( this ).text() ); | console.log( index + ": " + $( this ).text() ); | ||
}); | }); | ||
| − | </syntaxhighlight>وبالتالي تُسجَّل رسالة لكل عنصر في القائمة:<syntaxhighlight> | + | </syntaxhighlight>وبالتالي تُسجَّل رسالة لكل عنصر في القائمة:<syntaxhighlight lang="text"> |
0: foo | 0: foo | ||
1: bar | 1: bar | ||
</syntaxhighlight>ويمكنك إيقاف الحلقة من داخل دالة رد النداء عن طريق إعادة <code>false</code>. | </syntaxhighlight>ويمكنك إيقاف الحلقة من داخل دالة رد النداء عن طريق إعادة <code>false</code>. | ||
| − | ملاحظة: تتكرر معظم توابع jQuery التي تعيد كائن jQuery أيضًا عبر مجموعة العناصر في مجموعة jQuery، وهي عملية تُعرف بالتكرار الضمني (implicit iteration). عند حدوث ذلك، | + | ملاحظة: تتكرر معظم توابع jQuery التي تعيد كائن jQuery أيضًا عبر مجموعة العناصر في مجموعة jQuery، وهي عملية تُعرف بالتكرار الضمني (implicit iteration). عند حدوث ذلك، غالبًا ما يكون من غير الضروري التكرار بشكل صريح (explicitly) مع التابع <code>.each()</code> |
التابع <code>.each()</code> غير ضروري في الشيفرة التالية، وبدلاً من ذلك، يجب أن نعتمد على التكرار الضمني:<syntaxhighlight lang="jquery"> | التابع <code>.each()</code> غير ضروري في الشيفرة التالية، وبدلاً من ذلك، يجب أن نعتمد على التكرار الضمني:<syntaxhighlight lang="jquery"> | ||
| سطر 41: | سطر 41: | ||
=== أمثلة === | === أمثلة === | ||
| − | التكرار على ثلاثة <nowiki><div> | + | التكرار على ثلاثة <code>[[HTML/div|<nowiki><div></nowiki>]]</code> وضبط خاصية اللون لها:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 119: | سطر 119: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight>استخدم <code>return false</code> للخروج من حلقات <code>each().</code> في وقت مبكر | + | </syntaxhighlight>استخدم <code>return false</code> للخروج من حلقات <code>each().</code> في وقت مبكر:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 171: | سطر 171: | ||
== مصادر == | == مصادر == | ||
| − | * [http://api.jquery.com/each/ صفحة التابع .each() في توثيق jQuery الرسمي]. | + | * [http://api.jquery.com/each/ صفحة التابع .each() في توثيق jQuery الرسمي]. |
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Miscellaneous]] | [[تصنيف:jQuery Miscellaneous]] | ||
مراجعة 05:55، 14 مايو 2018
.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>