jQuery - map (метод)

Статья, в которой рассматривается метод библиотеки jQuery .map().

Метод .map() используется для прогона каждого элемента текущего набора через функцию.

Он обычно находит применение, когда необходимо получить некоторое значение у каждого элемента текущего набора или, наоборот, для того, чтобы установить элементам текущего набора некоторые значения.

jQuery - Метод .map()

Метод .map() использует в качестве параметра функцию, которая выполняется для каждого элемента текущего набора. В теле этой функции Вы можете прописывать различные действия, которые будут что-то производить над текущим элементом или получать у него какие-то данные. После прогона всех элементов текущего набора через функцию, данный метод возвращает результат в виде объекта jQuery, который состоит из массива значений, которые вернула функция для каждого элемента текущего набора.

$('селектор').map(index, element) {
  //index - индекс (порядковый номер) элемента в текущем наборе
  //element - текущий DOM-элемент
  //текущий элемент также можно получить посредством ключевого слова this
})

Но работать с массивом, который находится в объекте jQuery не очень удобно. Поэтому очень часто после вызова данного метода, вызывают метод .get() чтобы преобразовать массив находящийся в объекте jQuery в обычный массив.

$('селектор').map() {
  //...
}).get();
Не каждое значение которая вернула функция добавляется в результирующий набор. Если функция в качестве результата вернула значение null или undefined, то в результирующий набор элемент с указанным значением добавлен не будет.

Например, получить значения атрибутов href для всех элементов а в документе:

<div class="menu">
  <a href="\">Главная</a>
  <a href="\news">Новости</a>
  <a href="\article">Статьи</a>
</div>
<p>...</p>
<script>
$('a').map(function(){ 
  return this.href;
});  
</script>

Например, получить значение атрибута href только у тех элементов a на странице, у которых класс равен значению btn-primary. Кроме этого, необходимо вернуть полученные значения в виде простого массива.

<div class="menu">
  <a class="btn-default" href="\">Главная</a>
  <a class="btn-primary" href="\news">Новости</a>
  <a class="btn-primary" href="\article">Статьи</a>
</div>
<p>...</p>
<script>
$('a').map(function(){
  if(this.className=="btn-primary") {
    return this.href;
  }
}).get();  
</script>


   JavaScript и jQuery 0    773 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.