الفرق بين المراجعتين ل"jQuery/each"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 18: سطر 18:
 
لنفترض أن لديك قائمة بسيطة غير مرتبة في الصفحة:<syntaxhighlight lang="html">
 
لنفترض أن لديك قائمة بسيطة غير مرتبة في الصفحة:<syntaxhighlight lang="html">
 
<ul>
 
<ul>
−
   <li>foo</li>
+
   <li>حلوى</li>
−
   <li>bar</li>
+
   <li>مشروبات</li>
 
</ul>
 
</ul>
 
</syntaxhighlight>فيمكنك تحديد عناصر القائمة والتكرار عبرها:<syntaxhighlight lang="jquery">
 
</syntaxhighlight>فيمكنك تحديد عناصر القائمة والتكرار عبرها:<syntaxhighlight lang="jquery">
سطر 26: سطر 26:
 
});
 
});
 
</syntaxhighlight>وبالتالي تُسجَّل رسالة لكل عنصر في القائمة:<syntaxhighlight lang="text">
 
</syntaxhighlight>وبالتالي تُسجَّل رسالة لكل عنصر في القائمة:<syntaxhighlight lang="text">
−
0: foo
+
0: حلوى
−
1: bar
+
1: مشروبات
 
</syntaxhighlight>ويمكنك إيقاف الحلقة من داخل دالة رد النداء عن طريق إعادة <code>false</code>.
 
</syntaxhighlight>ويمكنك إيقاف الحلقة من داخل دالة رد النداء عن طريق إعادة <code>false</code>.
  
سطر 34: سطر 34:
 
التابع <code>‎.each()</code>‎  غير ضروري في الشيفرة التالية، وبدلاً من ذلك، يجب أن نعتمد على التكرار الضمني:<syntaxhighlight lang="jquery">
 
التابع <code>‎.each()</code>‎  غير ضروري في الشيفرة التالية، وبدلاً من ذلك، يجب أن نعتمد على التكرار الضمني:<syntaxhighlight lang="jquery">
 
$( "li" ).each(function() {
 
$( "li" ).each(function() {
−
   $( this ).addClass( "foo" );
+
   $( this ).addClass( "حلوى" );
 
});
 
});
 
   
 
   
−
$( "li" ).addClass( "bar" );
+
$( "li" ).addClass( "مشروبات" );
 
</syntaxhighlight>
 
</syntaxhighlight>
  
سطر 46: سطر 46:
 
<head>
 
<head>
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
−
   <title>each demo</title>
+
   <title>each مثال على التابع</title>
 
   <style>
 
   <style>
 
   div {
 
   div {
سطر 60: سطر 60:
 
<body>
 
<body>
 
   
 
   
−
<div>Click here</div>
+
<div>اضغط هنا</div>
−
<div>to iterate through</div>
+
<div>للتكرار خلال</div>
−
<div>these divs.</div>
+
<div>هذه الـ divs.</div>
 
   
 
   
 
<script>
 
<script>
سطر 83: سطر 83:
 
<head>
 
<head>
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
−
   <title>each demo</title>
+
   <title>each مثال على التابع</title>
 
   <style>
 
   <style>
 
   ul {
 
   ul {
سطر 102: سطر 102:
 
<body>
 
<body>
 
   
 
   
−
To do list: <span>(click here to change)</span>
+
To do list: <span>(اضغط هنا للتغيير)</span>
 
<ul>
 
<ul>
−
   <li>Eat</li>
+
   <li>يأكل</li>
−
   <li>Sleep</li>
+
   <li>ينام</li>
−
   <li>Be merry</li>
+
   <li>يبتهج</li>
 
</ul>
 
</ul>
 
   
 
   
سطر 124: سطر 124:
 
<head>
 
<head>
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
−
   <title>each demo</title>
+
   <title>each مثال على التابع</title>
 
   <style>
 
   <style>
 
   div {
 
   div {
سطر 142: سطر 142:
 
<body>
 
<body>
 
   
 
   
−
<button>Change colors</button>
+
<button>تغيير اللون</button>
 
<span></span>
 
<span></span>
 
<div></div>
 
<div></div>
سطر 148: سطر 148:
 
<div></div>
 
<div></div>
 
<div></div>
 
<div></div>
−
<div id="stop">Stop here</div>
+
<div id="stop">قف هنا</div>
 
<div></div>
 
<div></div>
 
<div></div>
 
<div></div>

مراجعة 14:22، 5 يونيو 2018

‎.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>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/each&oldid=10084"