Przegląd jQuery - metoda map()

Przegląd dotyczący przewijania jQuery

Przykład

Buduj listę wszystkich wartości formularza:

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

Spróbuj sam

Definicja i użycie

map() przekazuje każdy element funkcji do bieżącej kolekcji dopasowania, tworząc nowy obiekt jQuery zawierający wartości zwrócone.

Gramatyka

.map(callback(index,domElement))
Parametry Opis
callback(index,domElement) Obiekt funkcji wywoływany dla każdego elementu w bieżącej kolekcji.

Szczegółowe wyjaśnienie

Ponieważ wartość zwracana jest jako tablica opakowana przez jQuery, użyj get() do przetwarzania obiektu zwróconego, aby uzyskać podstawową tablicę.

.map() metoda jest szczególnie użyteczna do uzyskiwania lub ustawiania wartości zbioru elementów. Pomyśl o formularzu z serią pól wyboru:

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

Możemy uzyskać listę ID przecinek oddzielonych pól wyboru:

$(':checkbox').map(function() {
  return this.id;
).get().join(',');

Spróbuj sam

Wynik tego wywołania to ciąg znaków: "two,four,six,eight".

Wewnątrz funkcji callback, this odnosi się do bieżącego elementu DOM w każdym cyklu iteracji. Funkcja może zwracać pojedynczy element danych lub tablicę elementów danych do wstawienia do wynikowej kolekcji. Jeśli zwracana jest tablica, jej elementy będą wstawiane do kolekcji. Jeśli funkcja zwraca null lub undefined, żaden element nie zostanie wstawiony.

Przegląd dotyczący przewijania jQuery