jQuery Filtering Methods
jQuery offers several filtering methods to help you narrow down a group of
selected elements. These methods let you select elements based on their
position or whether they match specific criteria.
Basic Filtering Methods
- first() – Selects the first element in the matched set.
- last() – Selects the last element in the matched set.
- eq() – Selects an element at a specific index.
Advanced Filtering Methods
- filter() – Keeps only elements that match a given selector or condition.
- not() – Removes elements that match a given selector or condition.
jQuery first() Method
The first() method returns only the first element from a group of matched
elements.
Example
The following code selects the first <div> element on the page:
<!DOCTYPE html>
<html>
<head>
<title>jQuery first() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>
<button>Show First Div</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var firstDiv = $("div").first();
alert("First div: " + firstDiv.text());
});
});
</script>
</body>
</html>
This is useful when you want to perform an action on just the first
occurrence of an element type.
jQuery last() Method
The last() method is used to select the last element from a group of
matched elements.
Example
The following code selects the last <div> element on the
page:
<!DOCTYPE html>
<html>
<head>
<title>jQuery last() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>
<button>Show Last Div</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var lastDiv = $("div").last();
alert("Last div: " + lastDiv.text());
});
});
</script>
</body>
</html>
This method is helpful when you want to target the final occurrence of an
element within a collection for styling or manipulation.
jQuery eq() Method
The eq() method is used to select an element at a specific index from a
group of matched elements.
Indexing starts at 0, so the first element has index 0, the second has
index 1, and so on.
Example
The following example selects the second <p> element (which has an
index of 1):
<!DOCTYPE html>
<html>
<head>
<title>jQuery eq() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Paragraph 0</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<button>Show Paragraph at Index 1</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var secondParagraph = $("p").eq(1); // Index 1 (second element)
alert("Paragraph at index 1: " + secondParagraph.text());
});
});
</script>
</body>
</html>
This method is useful when you need to target a single element from a
list based on its position.
jQuery filter() Method
The filter() method allows you to refine a selection by specifying a
condition or selector. Only the elements that match the given criteria are
kept; the rest are removed from the selection.
Example
The following code selects all <p> elements that have the class
"intro":
<!DOCTYPE html>
<html>
<head>
<title>jQuery filter() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p class="intro">Paragraph 1 (intro)</p>
<p>Paragraph 2</p>
<p class="intro">Paragraph 3 (intro)</p>
<button>Show Paragraphs with Class "intro"</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var introParagraphs = $("p").filter(".intro").map(function(){
return this.tagName + " (" + $(this).text() + ")";
}).get().join(", ");
alert("Paragraphs with class 'intro': " + introParagraphs);
});
});
</script>
</body>
</html>
This method is useful when you want to narrow down a group of elements to
only those that meet certain requirements.
jQuery not() Method
The not() method is used to exclude elements that match a specific
selector or condition from a group of matched elements.
Example
The following code selects all <p> elements except those with the
class "intro":
<!DOCTYPE html>
<html>
<head>
<title>jQuery not() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p class="intro">Paragraph 1 (intro)</p>
<p>Paragraph 2</p>
<p class="intro">Paragraph 3 (intro)</p>
<p>Paragraph 4</p>
<button>Show Paragraphs NOT with Class "intro"</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var nonIntroParagraphs = $("p").not(".intro").map(function(){
return this.tagName + " (" + $(this).text() + ")";
}).get().join(", ");
alert("Paragraphs NOT with class 'intro': " + nonIntroParagraphs);
});
});
</script>
</body>
</html>
This is helpful when you want to apply actions or styles to all elements
in a group except certain ones.
More topic in jQuery
