jQuery 3.3

.each()




jquery

.each (وظيفة) إرجاع: jQuery

الوصف ؛: تكرار عبر كائن jQuery ، تنفيذ وظيفة لكل عنصر متطابق.

تم تصميم طريقة .each() لجعل بنية looping DOM موجزة وأقل عرضة للخطأ. عندما يطلق عليه فإنه يتكرر عبر عناصر DOM التي تعد جزءًا من كائن jQuery. في كل مرة يتم فيها تشغيل الاستدعاء ، يتم تمرير تكرار الحلقة الحالية ، بدءًا من 0. والأهم من ذلك ، يتم تشغيل رد الاتصال في سياق عنصر DOM الحالي ، وبالتالي فإن الكلمة الرئيسية تشير إلى العنصر.

لنفترض أن لديك قائمة بسيطة غير مرتبة في الصفحة:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

يمكنك تحديد عناصر القائمة والتكرار عبرها:

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

وبالتالي يتم تسجيل رسالة لكل عنصر في القائمة:

0: فو
1: شريط

يمكنك إيقاف الحلقة من داخل وظيفة معاودة الاتصال عن طريق إرجاع false .

ملاحظة: تتكرر معظم طرق jQuery التي تعرض كائن jQuery أيضًا عبر مجموعة العناصر في مجموعة jQuery - وهي عملية تُعرف بالتكرار الضمني . عند حدوث ذلك ، غالباً ما يكون غير الضرورية للتكرار بشكل صريح مع طريقة .each() :

// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});
 
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

أمثلة:

يتكرر على ثلاثة divs ويحدد ممتلكاتهم اللون.

<!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 للخروج من كل () حلقات في وقت مبكر.

<!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>

عرض: