Описание: Передает каждый элемент в соответствующем текущем наборе через функцию, создавая новый объект jQuery, содержащий возвращаемые значения.
.map( callback(индекс, элементDOM) )
Добавлена в версию: 1.2
callback(индекс, элементDOM)
Функция, исполняемая для каждого элемента в наборе.
Так как возвращаемое значение является обернутым массивом 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>
Мы можем получить список идентификационных номеров флажков, разделенный запятыми:
Результатом вызова является строка, "two,four,six,eight".
Внутри функции обратного вызова, this относится к тукущему элементу DOM для каждой итерации.
Функция может вернуть отдельный элемент данных или массив пунктов данных, которые будут включены в результирующий набор.
Если возвращается массив, элементы внутри массива будут включенны в набор.
Если функция возвращает null или undefined,
ни один элемент не будет внесен.
Примеры
Пример 1
Построение списка всех значений элементов в пределах формы.Пример 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 = $("Пример 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-ов.Пример 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>
Преобразует набор элементов в объекте jQuery в другой набор значений в виде массива jQuery (который может содержать или не содержать элементы).
Данным методом можно пользоваться для составления списков значений, атрибутов, значений css или даже создавать пользовательский специальный селектор.
Это предусматривает удобный способ использования
$.map().
Была ли эта информация полезной?
