jQuery 3.3

.map()




jquery

.map (رد الاتصال) إرجاع: jQuery

الوصف: قم بتمرير كل عنصر في المجموعة المتطابقة الحالية خلال إحدى الوظائف ، مما يؤدي إلى إنشاء كائن jQuery جديد يحتوي على قيم الإرجاع.

إذا كنت ترغب في معالجة صفيف أو كائن عادي ، فاستخدم jQuery.map() بدلاً من ذلك.

نظرًا لأن قيمة الإرجاع هي كائن 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>

للحصول على قائمة مفصولة بفواصل ID خانة الاختيار s:

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

نتيجة هذه المكالمة هي السلسلة "two,four,six,eight" .

ضمن وظيفة رد الاتصال ، يشير this إلى عنصر DOM الحالي لكل تكرار. يمكن أن تقوم الدالة بإرجاع عنصر بيانات فردي أو مصفوفة من عناصر البيانات لإدراجها في المجموعة الناتجة. إذا تم إرجاع صفيف ، يتم إدراج العناصر الموجودة داخل الصفيف في المجموعة. إذا كانت الدالة ترجع null أو undefined ، فلن يتم إدراج أي عنصر.

أمثلة:

بناء قائمة بجميع القيم داخل النموذج.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>map demo</title>
  <style>
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</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="https://johnresig.com/">
</form>
 
<script>
$( "p" )
  .append( $( "input" ).map(function() {
    return $( this ).val();
  })
  .get()
  .join( ", " ) );
</script>
 
</body>
</html>

عرض:

مثال مفتعل لإظهار بعض الوظائف.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>map demo</title>
  <style>
  body {
    font-size: 16px;
  }
  ul {
    float: left;
    margin: 0 30px;
    color: blue;
  }
  #results {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>
<ul id="results">
</ul>
 
<script>
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 a dom element, null,
  // or an array of dom elements
  return replacement;
});
$( "#results" ).append( mappedItems );
</script>
 
</body>
</html>

عرض:

تعادل مرتفعات divs.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>map demo</title>
  <style>
  div {
    width: 40px;
    float: left;
  }
  input {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></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>
 
<script>
$.fn.equalizeHeights = function() {
  var maxHeight = this.map(function( i, e ) {
    return $( e ).height();
  }).get();
  return this.height( Math.max.apply( this, maxHeight ) );
};
 
$( "input" ).click(function() {
  $( "div" ).equalizeHeights();
});
</script>
 
</body>
</html>

عرض: