.map()

.map( callback )Возвращает: jQuery

Описание: Пропускает каждый элемент в текущем наборе сопоставленных элементов через функцию, создавая новый объект jQuery, содержащий возвращаемые значения.

версия добавлена: 1.2.map( callback )
- callback
  
  Тип: Функция( Целое число индекс, Элемент domElement ) => Объект
  
  Объект функции, который будет вызван для каждого элемента в текущем наборе.

Если вы хотите обработать обычный массив или объект, используйте 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:

$( ":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-3.7.0.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-3.7.0.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>

Демо:

Выровнять высоту div-элементов.

<!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-3.7.0.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" ).on( "click", function() {
  $( "div" ).equalizeHeights();
} );
</script>
 
</body>
</html>

.map( callback )Возвращает: jQuery

версия добавлена: 1.2.map( callback )

Примеры:

Демо:

Демо:

Демо: