WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

jQuery Filtering

Previous Next

The first(), last(), eq(), filter() and not() Methods


In jQuery, the simplest filtering methods first(), last(), and eq() are used to target elements based on their position within a set of matched elements.

Additional methods like filter() and not() help you refine your selection by including only elements that meet or exclude those that don’t meet specific conditions.



jQuery first() Method


The .first() method in jQuery is used to select the first element from a group of matched elements.


The following example selects the first <div> element:


Example
<script>
$(document).ready(function(){
$("div").first().css("background-color", "yellow");
});
</script>
Try it yourself

jQuery last() Method


The .last() method in jQuery is used to select the last element from a set of matched elements.


The following example selects the last <div> element:

Example
<script>
$(document).ready(function(){
$("div").last().css("background-color", "yellow");
});
</script>
Try it yourself

jQuery eq() method


The .eq() method in jQuery is used to select a specific element based on its index position in a set of matched elements.


The index numbers start at 0, so the first element will have the index number 0 and not 1. The following example selects the second <p> element (index number 1):

Example
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color", "yellow");
});
</script>
Try it yourself

jQuery filter() Method


The .filter() method in jQuery is used to narrow down a set of matched elements by keeping only those that match a specified selector, function, or criteria.

The following example returns all <p> elements with class name "intro":

Example
<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color", "yellow");
});
</script>
Try it yourself

jQuery not() Method


The .not() method in jQuery is used to remove elements from a set of matched elements that match a specific selector or condition.


Tip: The not() method is the opposite of filter().


The following example returns all <p> elements that do not have class name "intro":

Example
<script>
$(document).ready(function(){
$("p").not(".intro").css("background-color", "yellow");
});
</script>
Try it yourself

Previous Next