Explain filtering elements in jquery with example
In jQuery, filtering elements allows you to select a subset of elements from a set of matched elements. You can filter elements based on various criteria, such as their index, content, attributes, etc. Here are some common methods and examples to filter elements in jQuery:
1. filter()
The filter() method reduces the set of matched elements to those that match the selector or pass the function's test.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Filter Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Filter elements with class "highlight"
$("p").filter(".highlight").css("color", "red");
});
</script>
</head>
<body>
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
<p class="highlight">Paragraph 4</p>
</body>
</html>
In this example, only paragraphs with the class "highlight" will have their text color changed to red.
2. not()
The not() method removes elements from the set of matched elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Not Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Exclude elements with class "exclude"
$("p").not(".exclude").css("color", "blue");
});
</script>
</head>
<body>
<p>Paragraph 1</p>
<p class="exclude">Paragraph 2</p>
<p>Paragraph 3</p>
<p class="exclude">Paragraph 4</p>
</body>
</html>
In this example, only paragraphs without the class "exclude" will have their text color changed to blue.
3. eq()
The eq() method reduces the set of matched elements to the one at the specified index.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Eq Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Select the second paragraph (index 1)
$("p").eq(1).css("font-weight", "bold");
});
</script>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
</html>
In this example, only the second paragraph (index 1) will have its text bolded.
4. first(), last(), even(), odd()
These methods reduce the set of matched elements to the first, last, even-indexed, or odd-indexed elements, respectively.
Example:
<!DOCTYPE html>
<html>
<head>
<title>First, Last, Even, Odd Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Select the first paragraph
$("p").first().css("background-color", "yellow");
// Select the last paragraph
$("p").last().css("background-color", "green");
// Select even-indexed paragraphs (0, 2, 4, ...)
$("p").even().css("background-color", "lightblue");
// Select odd-indexed paragraphs (1, 3, 5, ...)
$("p").odd().css("background-color", "lightpink");
});
</script>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</body>
</html>
In this example:
- The first paragraph will have a yellow background.
- The last paragraph will have a green background.
- Even-indexed paragraphs will have a light blue background.
- Odd-indexed paragraphs will have a light pink background.
These methods allow for versatile and powerful filtering of elements in jQuery, making it easy to apply specific styles or behaviors to a subset of elements in your web page.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Copyright 2023-2025 © All rights reserved.