[Функция] filter(fn)
Раздел "Traversing"
Удалить все элементы из набора выбранных элементов, котрые не соответсвуют определенной функции.
Параметры
filter(fn)
1.2
fn: функция переходящая в фильтр
function callback(indexInJQueryObject) {
this; // текущий элемент
}
Описание
Функция вызывается в контексте текущего элемента (точно так же как $.each). Если функция возвращает false, элемент удаляется – иначе элемент сохраняется.
Примеры
Пример:
Изменить цвет всех элементов div, затем установить рамку для элементов div индекс которых соответсвует 1 или id соответствует "fourth".
"jQuery"
$("div").css("background", "#b4b0da") .filter(function (index) { return index == 1 || $(this).attr("id") == "fourth"; }) .css("border", "3px double red");
"HTML"
<div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div> <div id="sixth"></div>
"CSS"
div { width:60px; height:60px; margin:5px; float:left;
border:3px white solid; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").css("background", "#b4b0da") .filter(function (index) { return index == 1 || $(this).attr("id") == "fourth"; }) .css("border", "3px double red"); }); </script> </head> <body class="iframe"> <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> <style> div { width:60px; height:60px; margin:5px; float:left; border:3px white solid; } </style>
Пример:
Уменьшить набор выбранных элементов с помощью функции filter, - для элементов div с классом "middle" добавить css свойство "border-color".
"HTML"
<div></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div></div>
"CSS"
div { width:60px; height:60px; margin:5px; float:left;
border:2px white solid;}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red"); }); </script> </head> <body class="iframe"> <div></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div></div> </body> </html> <style> div { width:60px; height:60px; margin:5px; float:left; border:2px white solid;} </style>
Пример:
Выбрать параграфы, после сократить набор к параграфам с классом "selected".
Пример:
Выбрать параграфы, после сократить набор к параграфам с классом "selected", а затем выбрать только параграфы являющие первыми для родительских элементов.
Пример:
Удалить элементы, которые имеют в качетсве потомка ol элемент.
Версия jQuery 1.4.2
Документ создан 2010-08-21