JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Filtering

In this tutorial you will learn how to filter element's selection using jQuery.

Filtering the Elements Selection

jQuery provides several methods such as filter(), first(), last(), eq(), slice(), has(), not(), etc. that you can use to narrow down the search for elements in a DOM tree.

jQuery first() Method

The jQuery first() method filters the set of matched elements and returns the first element from the set. The following example will only highlight the first <li> element within the <ul> element by adding the class .highlight on document ready.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").first().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

jQuery last() Method

The jQuery last() method filters the set of matched elements and returns the last element from the set. The following example will only highlight the last <li> element within the <ul> element by adding the class .highlight on document ready.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").last().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

jQuery eq() Method

The jQuery eq() method filters the set of matched elements and returns only one element with a specified index number. The following example will highlight the second <li> element within the <ul> element by adding the class .highlight on document ready.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").eq(1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

Note: The index supplied to the eq() method indicates the 0-based position of the element that means the index 0 target the first element, the index 1 targets the second element and so on. Also this index refers to the position of the element within the jQuery object, not within the DOM tree.

You can also specify a negative index number. A negative index number indicates a position starting from the end of the set, rather than the beginning. For example, the eq(-2) indicates the second last element within the set of matched elements.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").eq(-2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

jQuery filter() Method

The jQuery filter() method can take the selector or a function as its argument to filters the set of matched elements based on a specific criteria.

The supplied selector or function to the filter() method is tested against each element in the set of matched elements and all the elements that matching the supplied selector or pass the function's test will be included in the result.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

As stated earlier you can also pass a function to the filter() method to filter the set of matched elements based on certain conditions. The following example will test each <li> element within the <ul> and highlight those <li> elements whose indexes are odd numbers i.e. highlights only second and fourth list item as the index is zero-based.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").filter(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

jQuery has() Method

The jQuery has() method filters the set of matched elements and returns only those elements that has the specified descendant element. The following example will highlight all the <li> elements that has the descendant <ul> elements.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>Section 1</li>
        <li>Section 2</li>
        <li>
            <ul>
                <li>Section 2.1</li>
                <li>Section 2.2</li>
                <li>Section 2.3</li>
            </ul>
        </li>
        <li>Section 4</li>
    </ul>
</body>
</html>

jQuery not() Method

The jQuery not() method filters the set of matched elements and returns all elements that does not met the specified conditions. It can take the selector or a function as its argument.

The supplied selector or function to the not() method is tested against each element in the set of matched elements and all the elements that is not matching the supplied selector or pass the function's test will be included in the result.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").not(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

The not() method can take a function as its argument in the same way that filter() does, but it works just opposite of the filter() method i.e. the elements that pass the function's test are excluded and rest the elements are included in the result.

The following example will test each <li> element within the <ul> and highlight those <li> elements whose indexes are not the odd numbers i.e. highlights first and third list item.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").not(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

jQuery slice() Method

The jQuery slice() method filters the set of matched elements specified by a range of indices. This method accepts start and end (optional) index number as arguments, where the start index specifies the position at which the elements begin to be selected and the end index specify the position at which the elements stop being selected.

The following example will highlight the first and second <li> elements within the <ul> element by adding the class .highlight on document ready.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

You can also specify a negative index numbers. A negative index number indicates a position starting from the end of the set, rather than the beginning. For example, the slice(-2, -1) only highlight the third list item, since it is the only item in the range between two from the end (-2) and one from the end (-1), as end position is not included in result.

<!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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").slice(-2, -1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties