Getting Started With jQuery Traversing

Mohit Kumar
9y
13.3k
0
1

Article

Getting Started with jQuery Traversing

Once we have selected some HTML elements and want to modify, we need to traverse those elements, Traversing is a technique which is used to select elements by the relationships to other elements. By this technique we can start with one selector and can go on desire elements. Commonly used traversing functions are given below:

each()
first()
last()
next()
prev()
parent()
children()
siblings()

each()

The jQuery each() function is used to loop through each element of the target jQuery object. Here is an example:

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>each function in juquery traversing</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<style type="text/css">
.main{
height:100px;
width:100px;
padding:10px;
background-color:yellow;
display:inline-block;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".main").each(function() {
$(this).css("background-color", "red");
});
});
</script>
</head>
<body>
<div class="main">Div 1</div>
<div class="main">Div 2</div>
<div class="main">Div 3</div>
</body>
</html>

Output

Figure 1: Image for each function

First()

The first() function returns the first element in the selected set of elements.

Example

$(document).ready(function() {
$("div").first().css({
"color": "red",
"border": "2px solid red",
"background-color": "white"
});
});

Output: This function works for all the divs in the body sections excluding the first div.

Figure 2: image after first function

last()

The last() function returns the last element in the selected set of elements.

Example:

$(document).ready(function() {
$("div").last().css({
"color": "red",
"border": "2px solid red",
"background-color": "white"
});
});

Output: This function works for all the divs in the body sections excluding the last div.

Figure 3: image after last function

next()

The next() method returns the next sibling element of the selected element excluding the selected element.

Example:

$(document).ready(function() {
$("div").next().css({
"color": "red",
"border": "2px solid red",
"background-color": "white"
});
});

Output: This function works for all the divs in the body section excluding the first div. When all the elements are from same class then it works after excluding the first element.

Figure 4: image after next function

prev()

The prev() function returns the previous element to the selected element. When all the elements are from same class then it works after excluding the last element.

Example