Filtering in jQuery

jQuery has following methods for filtering

1. first()

2. last()

3. eq()

4. filter()

5. not()

The most essential filtering functions are first(), last() and eq(), which enable you to choose a particular element based of its position in a group of elements.

Other filtering methods, filter() and not() enable you to choose components that match, or don't coordinate, a specific criteria.

first() method in jQuery

The first() method selects the first element of the specified elements.

This example selects the first div element and changes the color of that div.

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
 <script>
$(document).ready(function(){
    $("div").first().css("background-color", "blue");
});
 </script>
 </head>
 <body>
<h4>Example of first() </h4>
<p>This is a paragraph. </p>
 <div style="border: 1px solid gray;">
This is a div one
 </div>
 <br>
<div style="border: 1px solid gray;">
  This is a div two
 </div>
 <br>
<div style="border: 1px solid gray;">
 This is a div three
 </div>

 </body>
 </html>

Output:

last() method in jQuery

The last method in jQuery selects the last element of the specified elements.

This example selects the last div element and changes the color of that div.

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
 <script>
$(document).ready(function(){
    $("div").last().css("background-color", "blue");
});
 </script>
 </head>
 <body>
 <h4>Example of last() </h4>
 <p>This is a paragraph. </p>
<div style="border: 1px solid gray;">
This is a div one
 </div>
 <br>
 <div style="border: 1px solid gray;">
  This is a div two
 </div>
 <br>
<div style="border: 1px solid gray;">
 This is a div three
 </div>
</body>
 </html>

eq() method in jQuery

The eq() method in jQuery select an element with a particular index of the selected elements.

Index start from 0 to n (number of elements -1).

This example selects the third lt;label> (index number 2)

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
 <script>
$(document).ready(function(){
    $("label").eq(2).css("background-color", "blue");
});
 </script>
 </head>
 <body>

 <h4>Eample of eq() </h4>

 <label>Label on index 0. </label>
 <br>
 <label>Label on index 1. </label> <br>
 <label> Label on  index 2. </label> <br>
 <label>Label on index 3. </label>

 </body>
 </html>

filter() method in jQuery

The filter() method gives you a chance to indicate a criteria. Elements that don't coordinate the criteria are expelled from the determination, and those that match will be returned.

This example selects all <label> elements with the class selectMe and changes the color of those labels

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
 <script>
$(document).ready(function(){
    $("label").filter(".selectMe").css("background-color", "blue");
});
 </script>
 </head>
 <body>

 <h4>Eample of filter() </h4>

 <label>I am Label 1. </label>
 <br>
 <label class="selectMe">I am Label 2. </label> <br>
 <label class="selectMe">I am Label 3. </label> <br>
 <label>I am Label 4. </label>

 </body>
 </html>

not() method in jQuery

The not() method selects all elements that do not coordinate the criteria.

Tip: The not() method is the inverse of filter()

This example selects all elements which have not doNotSelectMe class and changes their color

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
 <script>
$(document).ready(function(){
    $("label").not(".doNotSelectMe").css("background-color", "blue");
});
 </script>
 </head>
 <body>

 <h4>Eample of not() </h4>

 <label>I am Label 1. </label>
 <br>
 <label class="doNotSelectMe">I am Label 2. </label> <br>
 <label class="doNotSelectMe">I am Label 3. </label> <br>
 <label>I am Label 4. </label>

 </body>
 </html>

Also see

VueJS Components

Vue.js components are reusable blocks of code that define a portion of a user in...

How different is React’s ES6 syntax when compared to ES5?

...

jQuery Sliding HTML elements

Well organized and easy to understand Web building tutorials with lots of exampl...

Method Chaining in jQuery

jQuery Method Chaining ...

Advantages of React

...

Vue js Props

Props are essentially custom attributes that can be passed to a child component ...

React Flux Concept

React and Flux are two technologies that go hand in hand, and have taken the wor...

React Higher-Order Components

...

Form Validation in React JS

...

Submit A Form Without Page Refresh using jQuery

submit a html form without page refresh using jQuery ajax...