jQuery - SPLessons

jQuery Filtering

Chapter 18

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Filtering

jQuery Filtering

shape Description

jQuery Filtering is removing unwanted elements and applying the effects to only required terms. jQuery has many methods like filter(), first(), last(), eq(), slice(), has(), not(), etc. which helps to reduce searching elements in a DOM tree.

first() Method

shape Description

The method first() method filters sets of matched elements and returns the initial element from the set or a group. 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 type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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>


Output
:

The last() method filters the set of matched elements and returns the final element from the set.

eq() Method

shape Description

The method 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 type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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>

Output:

filter() Method

shape Description

jquery Filtering filter() method has the arguments with functions or the selectors, the set of matched elements depending on a particular criteria. The supplied selector or function to the filter() method is examined against every element in the group 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 type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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>

Output:

Summary

shape Key Points

jQuery Filtering draws out following main points.

  • filter(), first(), last(), eq(), slice(), has(), not() reduces DOM tree structure.