filter()

посл. ред. 11.08.2016

Метод filter() отфильтровывает выборку в соответствии с заданным селектором или функцией.

Варианты использования

jQ_object.filter(селектор) => jQuery: Оставляет только те элементы, которые удовлетворяют указанному селектору.
jQ_object.filter(функция) => jQuery: Фильтрация выборки осуществляется переданной функцией. Данная функция выполняется для каждого элемента выборки отдельно. Она должна возвращать значение true, если элемент удовлетворяет условию фильтрации и должен остаться в конечной выборке.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с выборкой jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф 1</p>
  <p class="main">Параграф 2</p>
  <p>Параграф 3</p>
  <p class="main">Параграф 4</p>
</body>
</html>
 
<script>
$('p')
/* выбор всех параграфов */
  .css('color', 'red')
/* установка красного цвета шрифта */
  .filter('.main')
/* выбор параграфов с классом main */
  .css('font-size', '150%');
/* увеличение размера шрифта */
</script>

Параграф 1

Параграф 2

Параграф 3

Параграф 4

<html>
<head>
  <title>Работа с выборкой jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф 1</p>
  <p></p>
  <p>Параграф 3</p>
  <p></p>
</body>
</html>
 
<script>
$('p')
/* выбор всех параграфов */
  .filter(function() {
    return (this.textContent == '');
  })
/* выбор пустых параграфов */
  .text('Текст аннулирован')
/* вставка текста */
  .css('font-size', '70%');
/* уменьшение размера шрифта */
</script>

Параграф 1

Текст аннулирован

Параграф 3

Текст аннулирован