jivo banner 468x60jivo banner 728x90jivo banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

Руководство по фильтрации элементов в 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>
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…
Подробнее

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…
Подробнее

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…
Подробнее