jQuery map(callback)

Поиск функций jQuery

Характеристика функции

[Функция] map(callback)

Раздел "Traversing"

Фунцкия трансформирует набор элементов jQuery объекта в другой набор переменных jQuery массива (который содержит или не содердит элементы).

Параметры

map(callback)

1.2

callback: функция применяется для любого элемента

function callback(index, domElement) {
  var replacement;

  this; // элемент

  // replacement == null : delete spot
  // replacement == array : insert the elements of the array
  // else replace the spot with replacement
  return replacement;
}

Описание

Вы можете использовать данную функцию для формирования списка переменных, атрибутов, css переменных. Здесь указан более удобный метод $.map().

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Создать список всех переменных, находящихся внутри формы.

"jQuery"

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

"HTML"

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

"CSS"

p { color:red; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

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


  });
</script>

</head>
<body class="iframe">


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


<style>

p { color:red; }

</style>

Пример:

Дополнительный пример <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> <ul id="results"> </ul>

"jQuery"

      var mappedItems = $("li").map(function (index) {
      var replacement = $("<li>").text($(this).text()).get(0);
      if (index == 0) {
        // сделаем текст первого элемента в верхнем регистре 
        $(replacement).text($(replacement).text().toUpperCase());
      } else if (index == 1 || index == 3) {
        // удаляем второй и четвёртый элементы списка
        replacement = null;
      } else if (index == 2) {
        // добавляем текст
        replacement = [replacement,$("<li>").get(0)];
        $(replacement[0]).append("<b> - A</b>");
        $(replacement[1]).append("Extra <b> - B</b>");
      }

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

"CSS"

  body { font-size:16px; }
  ul { float:left; margin:0 30px; color:blue; }
  #results { color:red; }

Метод появился в jQuery 1.2

Официальная страница метода - http://api.jquery.com/map/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: