In the last jQuery tutorial, we look into some of the tree traversing functions for parent and child elements. Today we will look into two of the simple traversing functions – first() and last().
jQuery first() function
The jQuery first() method is used to get the first element from the selected HTML elements. You can perform desired actions on the returned element.
This is the syntax for using jQuery first():
This method does not take any arguments.
jQuery first() example
Following example demonstrates the jQuery first() method usage.
jquery-first.html
<html>
<head>
<title>jQuery Traversing First</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<style>
.highlight{
background-color: yellow
}
</style>
<script>
$(document).ready(function(){
$("p span").first().addClass("highlight");
});
</script>
</head>
<body>
<h1>Journal Dev</h1>
<p>This is the <span>first</span> span element.</p>
<p>This the <span>second</span> span element.</p>
<p>This is the <span>third</span> span element.</p>
</body>
</html>
In this example, there are three <p> elements in this code. The first() method returns the first span element of the first p element and changes the background color to yellow. We have used jQuery addClass() method to include the CSS style class defined in the code.
Below image shows the output produced by the above HTML page.
jQuery last() function
The jQuery last() method is used to get the last element from the selected HTML elements. You can perform desired actions on the returned element.
This is the syntax for using jQuery last():
This method does not take any arguments.
jQuery last() example
Following example demonstrates the jQuery last() method usage.
jquery-last.html
<html>
<head>
<title>jQuery Traversing Last</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<style>
.highlight{
background-color: yellow
}
</style>
<script>
$(document).ready(function(){
$("p span").last().addClass("highlight");
});
</script>
</head>
<body>
<h1>Journal Dev</h1>
<p>This is the <span>first</span> span element.</p>
<p>This the <span>second</span> span element.</p>
<p>This is the <span>last</span> span element.</p>
</body>
</html>
In this example, there are three <p> elements in this code. The last() method returns the last span element of the last p element and changes the background color to yellow. We have used addClass() method in jQuery to include the CSS style class defined in the code.
Below is the output produced by the above HTML page, notice the last span element background color.
That’s all for now, we will look into more jQuery traversing methods in coming posts.