each()

.each( function(index, Element) )

מחזירה: jQuery

תיאור: מונה על אובייקט jQuery, מבצע פונקציה עבור כל אלמנט בהתאמה.

ארגומנטים

.each( function(index, Element) )

הוספה בגרסה: 1.0

function(index, Element)

פונקציה

פונקציה לביצוע עבור כל אלמנט בהתאמה.

שיטה .each() נועדה להפוך את מבנה לולאת DOM לקצר ונוטה פחות שגיאות. כאשר היא מופעלת היא עוברת על אלמנטים DOM, שהם חלק מאובייקט jQuery. כל פעם שמתבצעת לולאה היא עוברת על מחזור נוכחי שמתחיל מ-0. יותר חשוב, פעולה מתבצעת בקונטכסט של אלמנט DOM הנוכחי, אז מילת מפתח this מתייחסת לאלמנט.

נניח יש לנו רשימה פשוטה לא מסודרת על הדף:

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

אנחנו יכולים לבחור רשימת פריטים ולעבור עליהם:

$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
  });

נקבל הודעה על כל פריט ברשימה:

0: foo
1: bar

נוכל לעצור לולאה בתוך הפונקציה באמצעות החזרת false.

דוגמאות

דוגמה 1

עובר בלולאה על שלושה אלמנטים div ומגדיר מאפיין צבע שלהם.

$(document.body).click(function () {
      $("div").each(function (i) {
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <style>
  div { color:red; text-align:center; cursor:pointer; 
        font-weight:bolder; width:300px; }
  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function(){
$(document.body).click(function () {
      $("div").each(function (i) {
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });
});
</script>

</head>
<body>

	<div>Click here</div>

  <div>to iterate through</div>

  <div>these divs.</div>

</body>
</html>

נסה זאת בעצמך

דוגמה 2

אם אתם רוצים לקבל אובייקט jQuery במקום אלמנט רגיל של DOM, תשתמשו בפונקציה $(this), לדוגמה:

$("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
  ul { font-size:18px; margin:0; }
  span { color:blue; text-decoration:underline; cursor:pointer; }
  .example { font-style:italic; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
$("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });
});
</script>
</head>
<body>
To do list: <span>(click here to change)</span>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Be merry</li>
</ul>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

אתם יכולים להשתמש ב- 'return' כדי לצאת מלולאה each() מוקדם יותר.

    $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow"); 
        if ($(this).is("#stop")) {
          $("span").text("Stopped at div index #" + index);
          return false;
        }
      });
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 3 - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
  div { width:40px; height:40px; margin:5px; float:left;
        border:2px blue solid; text-align:center; }
  span { color:red; }
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
    $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow"); 
        if ($(this).is("#stop")) {
          $("span").text("Stopped at div index #" + index);
          return false;
        }
      });
    });
});
</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>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

each()

.each( function(index, Element) )

ארגומנטים

.each( function(index, Element) )

דוגמאות

דוגמה 1

דוגמה 2

דוגמה 3

תגובות