Описание: Сокращает набор элементов, которые соответствуют селектору или переданной функции.
.filter( селектор )
Добавлена в версию: 1.0
селектор
Строка, содержащая выражение для выбора элементов.
.filter( function(индекс) )
Добавлена в версию: 1.0
function(индекс)
Функция, используемая в качестве теста для каждого элемента в наборе.
this - это текущий элемент DOM.
.filter( элемент )
Добавлена в версию: 1.4
элемент
Элемент для соответствия текущему набору элементов.
.filter( объект jQuery )
Добавлена в версию: 1.4
объект jQuery
Существующий объект jQuery для соответствия текущему набору элементов.
Данный объект jQuery, который представляет набор элементов DOM, метод .filter() создает новый объект jQuery из подмножества соответствующих элементов.
Поставляемый селектор проверяется по каждому элементу; все элементы, соответствующие выбору, будут включены в результат.
Рассмотрим страницу с простым списком:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
Мы можем применить этот метод к набору элементов списка:
$('li').filter(':even').css('background-color', 'red');
Результатом этого вызова является красный фон для первого, третьего и пятого элементов, в соответствии с выбором (напомним, что :even и :odd используют базу индексации 0).
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
Использование функции фильтра
Вторая форма этого метода позволяет нам фильтровать элементы с помощью функции, а не с селектором.
Для каждого элемента, если функция возвращает true,
элемент будет включен в отфильтрованный набор; в противном случае он будет исключен.
Предположим, мы имеем несколько более активное участие во фрагменте HTML:
<ul>
<li><strong>list</strong> item 1 -
one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Мы можем выбрать элементы списка, а затем удалить их на основе их содержания:
Этот код изменит только первый пункт списка, так как он содержит ровно один тег
<strong>.
В функции фильтра, this относится к каждому элементу DOM в очереди.
Параметр, переданный в функцию, указывает на индекс элемента DOM в пределах набора установленного объектом jQuery.
Мы также можем воспользоваться переданным через функцию индексом,
который указывает на начинающееся с 0 положение элемента в наборе нефильтрованных элементов:
$('li').filter(function(index) {
return index % 3 == 2;
}).css('background-color', 'red');
- list item 1 - one strong tag
- list item 2 - two strong tags
- list item 3
- list item 4
- list item 5
- list item 6
Это изменение в коде приведет к третьему и шестому пунктам списка, которые будут выделенны, так как здесь используется оператор взятие модуля (%),
для выбора каждого пункта со значением индекс,
когда делится на 3, дает в остатке 2.
Примеры
Пример 1
Изменяет цвет фона всех элементов div и затем рисует границу вокруг некоторых из них.Пример 1 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:2px white solid;}
</style>
</head>
<body>
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
</body>
</html>
Пример 2
Выделяет все параграфы и удаляет те, которые не имеют класса «selected».$("p").filter(".selected")
Пример 3
Выделяет все параграфы и удаляет те, которые не имеют класса «selected» или не первый по списку.$("p").filter(".selected, :first")
Пример 4
Изменяет цвет фона всех элементов div и затем рисует границу вокруг двух из них.Пример 4 - Полный код:
Изменяет цвет фона всех элементов div и затем рисует границу вокруг двух из них.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").css("background", "#b4b0da")
.filter(function (index) {
return index == 1 || $(this).attr("id") == "fourth";
})
.css("border", "3px double red");
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:3px white solid; }
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
</body>
</html>
Пример 5
Удаляет все элементы, которые имеют дочерний элемент ol.$("div").filter(function(index) { return $("ol", this).length == 0; });
Была ли эта информация полезной?
