Руководство по фильтрации элементов в jQuery

jQuery предоставляет несколько методов, таких как filter(), first(), last(), eq(), slice(), has(), not() и т. д., которые можно использовать для сужения поиска элементов в DOM-дереву.

jQuery-метод first()

jQuery-метод first() фильтрует набор соответствующих элементов и возвращает первый элемент из набора. В следующем примере будет выделен только первый элемент <li> внутри элемента <ul>, добавив класс .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery first() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").first().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

jQuery-метод last()

jQuery-метод last() фильтрует набор соответствующих элементов и возвращает последний элемент из набора. В следующем примере будет выделен только последний элемент <li> внутри элемента <ul>, добавив класс .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery last() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").last().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

jQuery-метод eq()

jQuery-метод eq() фильтрует набор совпадающих элементов и возвращает только один элемент с указанным порядковым номером. В следующем примере будет выделен второй элемент <li> внутри элемента <ul>, добавив класс .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").eq(1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

Индекс, предоставленный методу eq(), указывает позицию элемента начиная с 0, т.е. индекс 0 соответствует первому элементу, индекс 1 соответствует второму элементу и так далее. Также этот индекс относится к положению элемента в объекте jQuery, а не в дереве DOM.

Вы также можете указать отрицательный индекс. Отрицательный индекс указывает на позицию, начинающуюся с конца набора, а не с начала. Например, eq(-2) выбирает второй элемент с конца.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").eq(-2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

jQuery-метод filter()

jQuery-метод filter() может использовать селектор или функцию в качестве аргумента для фильтрации набора соответствующих элементов на основе определенных критериев.

Предоставленный селектор или функция для метода filter() проверяется для каждого элемента в наборе соответствующих элементов, и все элементы, которые соответствуют предоставленному селектору или проходят тест функции, будут включены в результат.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

Как было сказано ранее, вы также можете передать функцию в метод filter() для фильтрации набора соответствующих элементов на основе определенных условий. В следующем примере проверяется каждый элемент <li> в пределах <ul> и выделяются те элементы <li>, индексами которых являются нечетные числа, т. е. выделяются только второй и четвертый элементы списка.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").filter(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

jQuery-метод has()

jQuery-метод has() фильтрует набор совпадающих элементов и возвращает только те элементы, которые имеют указанный элемент-потомок. В следующем примере будут выделены все элементы <li>, которые имеют потомка <ul>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>Секция 1</li>
        <li>Секция 2</li>
        <li>
            <ul>
                 <li>Первый элемент списка</li>
                 <li>Второй элемент списка</li>
                 <li>Третий элемент списка</li>
                 <li>Последний элемент списка</li>
            </ul>
        </li>
        <li>Секция 4</li>
    </ul>
</body>
</html>

jQuery-метод not()

jQuery-метод not() фильтрует набор соответствующих элементов и возвращает все элементы, которые не удовлетворяют указанным условиям. Он может принимать селектор или функцию в качестве аргумента.

Предоставленный селектор или функция для метода not() проверяется для каждого элемента в наборе соответствующих элементов, и все элементы, которые не соответствуют предоставленному селектору или не проходят тест функции, будут включены в результат.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").not(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

Метод not() может принимать функцию в качестве аргумента так же, как и filter(), но он работает прямо противоположным образом, чем метод filter(), т.е. элементы, которые проходят тест функции, исключаются, а остальные элементы включаются в результат.

В следующем примере проверяется каждый элемент <li> в пределах <ul> и выделяются те элементы <li>, индексами которых не являются нечетные числа, т.е. выделяются первый и третий элементы списка.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").not(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

jQuery-метод slice()

jQuery-метод slice() фильтрует набор совпадающих элементов, заданных диапазоном индексов. Этот метод принимает начальный и конечный (необязательный) номер индекса в качестве аргументов, где начальный индекс указывает позицию, в которой элементы начинают выбираться, а конечный индекс указывает позицию, в которой элементы перестают быть выбранными.

В следующем примере будут выделены первый и второй элементы <li> внутри элемента <ul>, добавив класс .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>

Вы также можете указать отрицательные индексы. Отрицательный индекс указывает на позицию, начинающуюся с конца набора, а не с начала. Например, slice(-2, -1) только выделяет третий элемент списка, поскольку он является единственным элементом в диапазоне между -2 от конца и -1 от конца.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").slice(-2, -1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
         <li>Первый элемент списка</li>
         <li>Второй элемент списка</li>
         <li>Третий элемент списка</li>
         <li>Последний элемент списка</li>
    </ul>
</body>
</html>