[Функция] 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().
Примеры
Пример:
Создать список всех переменных, находящихся внутри формы.
"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://test-drupal.ru/themes/slyweb/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.4.2
Документ создан 2010-08-21