Quick Contact

    jQuery Filtering

    Filtering the Elements Selection

    To focus the search for components in a DOM tree, jQuery offers a number of functions like filter(), first(), last(), eq(), slice(), has(), not(), etc.

    jQuery first() Method

    The set of matching elements is filtered using the jQueryfirst() method, which then returns the set’s first element. The class will only be applied to the first < li> element inside the < ul> component in the example below. with “document ready”

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting the First Element in jQuery< /title>
    < style>
        .highlight{
    background: skyblue;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("ul li").first().addClass("highlight");
    });
    < /script>
    < /head>
    < body>
    	< h2>Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Second Unordered List< /h2>
    	< 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 last() Method

    The set of matching elements is filtered using the jQuerylast() method, which provides the final element in the set. The class is added in the following example to only highlight the final < li> element within the < ul> element.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting the Last Element in jQuery< /title>
    < style>
        .highlight{
    background: yellow;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("ul li").last().addClass("highlight");
    });
    < /script>
    < /head>
    < body>
    	< h2>Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Another Unordered List< /h2>
    	< 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 eq() Method

    Only one element with the given index number is returned by the jQueryeq() method, which filters the set of matched elements. The class will be added in the example below to draw attention to the second < li> element inside the < ul> element.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting an Element by Index in jQuery< /title>
    < style>
        .highlight{
    background: yellow;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("ul li").eq(1).addClass("highlight");
    });
    < /script>
    < /head>
    < body>
    	< h2>Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Another Unordered List< /h2>
    	< ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    < /body>
    < /html>
    

    Note:
    The index provided to the eq() method shows the element’s location as a 0-based number, so the first element is targeted by index 0, the second element is targeted by index 1, and so on. Additionally, this index describes the element’s location within the jQuery object, not the DOM tree.

    Additionally, a negative index number is an option. A location starting from the end of the set rather than the beginning is indicated by a negative index number. For instance, the symbol eq(-2) denotes the element that comes after the last one in the collection of matched elements.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting an Element by Negative Index in jQuery< /title>
    < style>
        .highlight{
    background: yellow;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("ul li").eq(-2).addClass("highlight");
    });
    < /script>
    < /head>
    < body>
    	< h2>Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Another Unordered List< /h2>
    	< 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 set of matched elements can be filtered using a specified set of criteria using the jQueryfilter() method, which accepts a selector or a function as an argument.

    All the items that match the specified selector or pass the function’s test will be included in the result. The supplied selector or function to the filter() method is tested against each element in the collection of matched elements.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Filtering the Selection of Elements in jQuery via Selectors< /title>
    < style>
        .highlight{
    background: skyblue;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("ul li").filter(":even").addClass("highlight");
    });
    < /script>
    < /head>
    < body>
    	< h2>First Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Second Unordered List< /h2>
    	< 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 previously mentioned, you may further supply a function to the filter() method to further filter the list of matched components according to certain criteria. The next example will examine each < li> element within the < ul> and highlight those < li> components whose indices are odd integers. For example, the example will only highlight the second and fourth list items because their indexes are zero-based.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Filtering the Selection of Elements in jQuery via Function< /title>
    < style>
        .highlight{
    background: skyblue;
        }        
    < /style>
    < scriptsrc="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>
    	< h2>First Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Second Unordered List< /h2>
    	< 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 has() Method

    The has() function of the jQuery library filters the list of matched elements and only returns those that have the provided descendant element. The < li> elements that have < ul> elements as descendants will all be highlighted in the example below.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting Elements that Contain Specific Child Elements in jQuery< /title>
    < style>
        .highlight{
    background: yellow;
        }        
    < /style>
    < scriptsrc="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 not() function of the jQuery library filters the collection of matched elements and returns any components that did not fit the criteria. It accepts either a function or a selector as an argument.

    Each element in the set of matched elements is examined using the specified selector or function when using the not() method, and any items that do not match the supplied selector or pass the function’s test are included in the result.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting Elements that Doesn't Match a Condition in jQuery< /title>
    < style>
        .highlight{
    background: skyblue;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("ul li").not(":even").addClass("highlight");
    });
    < /script>
    < /head>
    < body>
    	< h2>First Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Second Unordered List< /h2>
    	< 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 is similar to filter() in that it accepts a function as an argument, but it operates in the opposite way, excluding only the elements that pass the function’s test and include all other elements in the result.

    The next example will examine every < li> element inside of an < ul> and highlight any < li> elements whose indices are not odd numbers, such as the first and third list items.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting Elements that Didn't Pass a Function Test in jQuery< /title>
    < style>
        .highlight{
    background: yellow;
        }        
    < /style>
    < scriptsrc="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>
    	< h2>Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Another Unordered List< /h2>
    	< 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 slice() method of jQuery filters the set of matched elements defined by an index range. This method accepts start and end (optional) index numbers as parameters, where the start index determines where the elements begin to be selected and the end index specifies where the elements stop being picked.

    The following example uses the class to highlight the first and second < li> items within the < ul> element.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting the Elements by Range of Indices in jQuery< /title>
    < style>
        .highlight{
    background: yellow;
        }        
    < /style>
    < scriptsrc="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>
    	< h2>Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Another Unordered List< /h2>
    	< 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 even specify negative index numbers. A negative index number denotes a place that begins at the end of the set rather than the beginning. For example, the slice(-2, -1) only highlights the third list item because 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 the result.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Selecting the Elements by Range of Negative Indices in jQuery< /title>
    < style>
        .highlight{
    background: yellow;
        }        
    < /style>
    < scriptsrc="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>
    	< h2>Unordered List< /h2>
    < ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    	< hr>
    	< h2>Second Unordered List< /h2>
    	< ul>
    < li>First list item< /li>
    < li>Second list item< /li>
    < li>Third list item< /li>
    < li>Fourth list item< /li>
    < /ul>
    < /body>
    < /html>
    

    FAQS

    Q1. What is filtering in jQuery?

    With this approach, you can give a requirement. Items that don’t fit the requirements are eliminated from the selection, and those that do will be given back. This technique is frequently used to focus the search for an element within a collection of well-chosen items.

    Q2. Difference between selectors and filters in jQuery?

    The jQuery selector uses the element name you provide to select all of the elements. By giving the selection criteria, jQueryfilter() enhances the selected components with additional information.

    Q3. What is filter () in JavaScript?

    A new array of elements that pass a test supplied by a function is created by the filter() method. For empty elements, the filter() method does not run the function. The original array is unaltered by the filter() technique.

    Q4. What is filtering in REST API?

    REST APIs for SAS: Filtering Applying a Boolean condition to a group of resources in order to narrow the group down to only those resources for which the condition is true is known as filtering. Filtering is comparable to a SQL query with a WHERE clause for people who are familiar with the language.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.