jQuery przechodzenie - metoda filter()

jQuery 遍历参考手册

Przykład

Zmień kolor wszystkich elementów div, a następnie dodaj ramkę do klasy o nazwie "middle":

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

Spróbuj sam

Definicja i użycie

Metoda .filter() zmniejsza zestaw dopasowanych elementów do elementów dopasowujących się do określonego selektora.

Gramatyka

.filter(selector)
Parametry Opis
selector Wartość ciągła, zawierająca wyrażenie selektora dostarczone do dopasowania bieżącego zbioru elementów.

Szczegółowe wyjaśnienie

Jeśli podany obiekt jQuery reprezentujący zestaw elementów DOM, metoda .filter() utworzy nowy obiekt jQuery, który będzie zawierał podzbiór elementów dopasowujących się do selektora. Selektor będzie testował każdy element; wszystkie elementy pasujące do tego selektora zostaną zawarte w wyniku.

Pomyśl o poniższej stronie z prostą listą:

<ul>
  <li>pozycja listy 1</li>
  <li>pozycja listy 2</li>
  <li>pozycja listy 3</li>
  <li>pozycja listy 4</li>
  <li>pozycja listy 5</li>
  <li>pozycja listy 6</li>
</ul>

możemy zastosować tę metodę do zbioru tych pozycji listy:

$('li').filter(':even').css('background-color', 'red');

Spróbuj sam

Wynik tego wezwania to ustawienie tła na czerwono dla pozycji 1, 3, 5, ponieważ wszystkie te pozycje pasują do selektora (pamiętaj, :even i :odd używają indeksów bazujących na 0).

Użycie funkcji filtrującej

Druga forma tego methodu polega na filtrowaniu elementów za pomocą funkcji zamiast selektorów. Dla każdego elementu, jeśli funkcja zwróci true, element zostanie uwzględniony w wybranej zbiorze; w przeciwnym razie, zostanie wykluczony.

Zobacz poniższy nieco bardziej złożony fragment HTML:

<ul>
  <li><strong>list</strong> pozycja 1 - jeden znacznik strong</li>
  <li><strong>list</strong> pozycja <strong>2</strong>
   - dwa <span>znaczniki strong</span></li>
  <li>pozycja listy 3</li>
  <li>pozycja listy 4</li>
  <li>pozycja listy 5</li>
  <li>pozycja listy 6</li>
</ul>

możemy wybrać te pozycje listy i na ich podstawie je filtrować:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
).css('background-color', 'red');

jQuery 遍历参考手册