In jQuery there are three most essential filtering techniques used these are first(), last() and eq(), which permit you to choose a particular element in respect of its position when there are more than one element or have group of elements.
jQuery first() Method
jQuery first() gives back the first element in groups of elements for eg:- if we have many para tag and we want to perform some changes only on first para then with the help of jQuery first() method we can acquire it.
This method will give back first para from group of paras in which we want to perform task.
Below is the example in which we are performing this method.
Html code:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Test Javascript</h1>
<p>This is the first para.</p>
<p>This is the second para.</p>
<p>This is the third para.</p>
<p>This is the last para.</p>
</body>
</html>
javascript code:-
we have to put below javascript code within head tag of our html document.
<script>
$(document).ready(function(){
$("p").first().css("background-color", "red");
});
</script>
In above code $("p").first().css("background-color", "red"); is selecting and making the first para's background color red.
working demo:-https://jsfiddle.net/ok2qvfhx/
jQuery last() Method:-
It gives back the last element in groups of element for eg:- if we have to many para tag and we want to perform some changes only on the last para then with the help of jQuery last() method we can acquire it.
If we put the below jQuery code instead of above jQuery code in our html document then we will select last para tag and can modify it.
<script>
$(document).ready(function(){
$("p").last().css("background-color", "red");
});
</script>
jQuery eq() method
The jQuery eq() method gives back the element with a particular index number of the selected elements.
The index value start with 0 and then get incremented for eg:- if we have 5 para tag then first para have index value 0 and the last para have index value 3.
Below is the jquery code for jquery eq() method :-
<script>
$(document).ready(function(){
$("p").eq(2).css("background-color", "red");
});
</script>
In above code $("p").eq(3).css("background-color", "red"); will select and make the fourth para's background color red.
Working demo :- https://jsfiddle.net/vrc9vjwp/2/
0 Comment(s)