In jQuery, traversing means moving through or over the HTML elements to find, filter or select a particular or entire element.
Based on the traversing purposes following methods are Categorized as follows:
Tree Traversing:
Ancestors:
- parent()
it gives parent element of specified selector
Syntax:$(selector).parent();
- parents()
it gives all ancestor elements of the specified selector.
Syntax: $(selector).parents();
- parentsUntil()
it gives all ancestor elements between specified selector and arguments.
Syntax:$(selector).parentsUntil(selector, filter element)
$(selector).parentsUntil(element, filter element)
- offsetParent()
it gives the first positioned parent element of specified selector.
Syntax:$(selector).offsetParent();
- closest()
it gives the first ancestor of the specified selector.
Syntax:$(selector).closest(selector);
$(selector).closest(selector, context);
$(selector).closest(selection);
$(selector).closest(element);
Descendants:
- children()
it gives the children of each selected elements, optionally filtered by a selector.
Syntax:$(selector).children();
- find()
it gives descendant elements of specified elements, filtered by a selector, jQuery object, or element.
Syntax:$(selector).find('selector to find');
Siblings:
siblings()
it gives all siblings of the specified selector.
Syntax:
$(selector).siblings();
- next()
it gives the next sibling element of the specified selector.
Syntax:$(selector).next();
- nextAll()
it gives all next sibling elements of the specified selector.
Syntax:$(selector).nextAll();
- nextUntil()
it gives all next sibling elements between specified selector and arguments.
Syntax:$(selector).nextUntil();
- prev()
it gives the previous sibling element of the specified selector.
Syntax:$(selector).prev(selector);
$(selector).prev()
- prevAll()
it gives all previous sibling elements of the specified selector.
Syntax:$(selector).prevAll(selector, filter element)
$(selector).prevAll(element, filter element)
- prevUntil()
it gives all previous sibling elements between specified selector and arguments.
Syntax:$(selector).prevUntil(selector, filter element)
$(selector).prevUntil(element, filter element)
Filtering
- first()
it gives the first element of the specified selector.
Syntax:$(selector).first();
- last()
it gives the last element of the specified selector.
Syntax:$(selector).last();
- eq()
it gives an element with a specific index number of the specified selector.
Syntax: $(selector).eq(index);
$(selector).eq( indexFromEnd );
- filter()
it remove/detect an elements that are matched with specified selector.
Syntax:$(selector).is(selector)
$(selector).is(function)
$(selector).is(selection)
$(selector).is(elements)
- has()
it gives all elements that have one or more elements within, that are matched with specified selector.
Syntax:$(selector).has(selector);
- is()
it checks if one of the specified selector is matched with arguments.
Syntax:.is( selector )
.is( function )
.is( selection )
.is( elements )
- map()
Pass each element in the current matched set through a function, producing a new jQuery object containing the return values
Syntax:.map( callback )
- slice()
it selects a subset of specified selector based on its argument index or by start and stop value.
Syntax:$(selector).slice(start, end );
$(selector).slice(start);
Miscellaneous Traversing
- add()
it add all elements to set of matched elements to manipulate them at the same time.
Syntax:$(selector).add(selector to add);
- addBack()
it add the previous set of elements on the stack to the current set, optionally filtered by a selector.
Syntax:$(selector).addBack();
- andSelf()
Deprecated 1.8 which is alias of addBack().
Syntax:$(selector).addSelf();
- contents()
it gives all direct children, including text and comment nodes, of the specified selector.
Syntax: $(selector).contents();
- not()
it gives all elements that do not match with specified selector.
Syntax:$(selector).not(selector);
- end()
it is most recent filtering operation in the current chain and return the set of matched elements to its previous state and it doesn’t accept any arguments.
Syntax:$(selector).each(callback function);
Collection Manipulation
- each()
it iterates over the DOM elements and execute call back function
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("h2").siblings().css({
"color": "red",
"border": "2px solid red"
});
$("h2").parent().css({
"color": "green",
"border": "2px solid blue"
});
$("p").first().css(
"background-color", "yellow");
$("p").has("span").css(
"background-color", "indigo");
});
</script>
</head>
<body class="siblings">
<div>GeeksforGeeks (parent)
<p>GeeksforGeeks</p>
<p><span>GeeksforGeeks</span></p>
<h2>GeeksforGeeks</h2>
<h3>GeeksforGeeks</h3>
<p>GeeksforGeeks</p>
</div>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
p {
color: grey;
margin: 10px;
padding: 10px;
}
form {
margin: 10px;
padding: 10px;
}
#article b {
color: blue;
font-weight: bold;
}
label {
color: green;
font-weight: bold;
}
</style>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<p><em>Hello</em>GeeksforGeeks</p>
<p id="article"><b>Article Info: </b></p>
<form>
<label>Article Title:</label>
<input type="text"
name="article"
value="jQuery |
Traversing Example 2" />
<br>
<br>
<label>Author:</label>
<input type="text"
name="author"
value="Vignesh" />
<br>
<br>
<label>Author's Email id:</label>
<input type="text"
name="author"
value="vignesh@gmail.com" />
<br>
<br>
<label>Website:</label>
<input type="text"
name="url"
value="https://www.geeksforgeeks.org/" />
<br>
<br>
</form>
<script>
$("#article")
.append($("input").map(function() {
return $(this).val();
})
.get()
.join(", "));
</script>
<script>
$("p")
.find("em")
.end()
.css("border", "2px red solid");
</script>
</body>
</html>
