map()

.map( callback(index, domElement) )

מחזירה: jQuery

תיאור: מעבור כל אלמנט בקבוצת אלמנטים בהתאמה דרך פונקציה, מייצר אובייקט חדש של jQuery, שמכיל ערכים שחזרו.

.map( callback(index, domElement) )

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

callback(index, domElement)

פונקציה

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

מכיוון שערך שמוחזר הוא מערך עטוף של jQuery, שיטה שבדרך כלל משתמשים בה, get() מחזירה אובייקט לעבודה עם מערך בסיסי.

שיטה .map() מאוד שימושית עבור קבלה והגדרה נתונים מסט של אלמנטים. נתבונן על טופס עם קבוצה תיבות סימון בו:

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">

    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>

    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>

      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

אנחנו יכולים לקבל רשימה של מספרי זיהוי של תיבות סימון מופרדת עם הפסיקים:

$(':checkbox').map(function() {
  return this.id;
}).get().join(',');

התוצאה של קריאה זו היא מחרוזת, "two,four,six,eight".

בתוך הפונקציה של קריאה חוזרת, this מתייחס לאלמנט נוכחי של DOM עבור כל איטרציה. הפונקציה יכולה להחזיר אלמנט נתונים בודד או מערך אלמנטים שיכנסו כסט תוצאה. אם מערך הוחזר, אלמנטים בתוך מערך ינסו בתוך הסט. אם פונקציה מחזירה null או undefined, אף אלמנט לא יוכנס.

דוגמאות

דוגמה 1

בונה רשימה של כל הערכים בתוך התוונית.

    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

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

נסה זאת בעצמך

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

בונה רשימה של כל הערכים בתוך התוונית.

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

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

  $(document).ready(function(){
    
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );


  });
  </script>

  <style>
  p { color:red; }
  </style>

</head>
<body>
  <p><b>Values: </b></p>

  <form>
    <input type="text" name="name" value="John"/>

    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://ejohn.org/"/>
  </form>
</body>

</html>

נסה זאת בעצמך

דוגמה 2

דוגמה הזו מציגה פונקציונליות

    var mappedItems = $("li").map(function (index) {
      var replacement = $("<li>").text($(this).text()).get(0);
      if (index == 0) {
        // make the first item all caps
        $(replacement).text($(replacement).text().toUpperCase());
      } else if (index == 1 || index == 3) {
        // delete the second and fourth items
        replacement = null;
      } else if (index == 2) {
        // make two of the third item and add some text
        replacement = [replacement,$("<li>").get(0)];
        $(replacement[0]).append("<b> - A</b>");
        $(replacement[1]).append("Extra <b> - B</b>");
      }

      // replacement will be an dom element, null, 
      // or an array of dom elements
      return replacement;
    });
    $("#results").append(mappedItems);

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

נסה זאת בעצמך

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

דוגמה הזו מציגה פונקציונליות

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

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

  $(document).ready(function(){
    
  var mappedItems = $("li").map(function (index) {
      var replacement = $("<li>").text($(this).text()).get(0);
      if (index == 0) {
        // make the first item all caps
        $(replacement).text($(replacement).text().toUpperCase());
      } else if (index == 1 || index == 3) {
        // delete the second and fourth items
        replacement = null;
      } else if (index == 2) {
        // make two of the third item and add some text
        replacement = [replacement,$("<li>").get(0)];
        $(replacement[0]).append("<b> - A</b>");
        $(replacement[1]).append("Extra <b> - B</b>");
      }

      // replacement will be an dom element, null, 
      // or an array of dom elements
      return replacement;
    });
    $("#results").append(mappedItems);



  });
  </script>

  <style>
  body { font-size:16px; }
  ul { float:left; margin:0 30px; color:blue; }
  #results { color:red; }
  </style>
</head>
<body>
  <ul>
    <li>First</li>

    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>

  </ul>
  <ul id="results">
  </ul>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

משווה גובה של אלמנטים div.

$.fn.equalizeHeights = function(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
  $('div').equalizeHeights();
});

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

נסה זאת בעצמך

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

משווה גובה של אלמנטים div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
div { width: 40px; float:left; }
input { clear:left}
  </style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
     $.fn.equalizeHeights = function(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
  $('div').equalizeHeights();
});
  });
  </script>

</head>
<body>

<input type="button" value="equalize div heights">

<div style="background:red; height: 40px; "></div>
<div style="background:green; height: 70px;"></div>
<div style="background:blue; height: 50px; "></div>

</body>
</html>

נסה זאת בעצמך

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

כן לא

map()

.map( callback(index, domElement) )

.map( callback(index, domElement) )

דוגמאות

דוגמה 1

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

דוגמה 2

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

דוגמה 3

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

תגובות