JQuery Traversal Techniques concepts with samples

In this article, we will look into all of the jQuery Traversal techniques available, with code samples of each. Easy explanation of concepts will help you learning the techniques in a quick and efficient manner

jQuery Traversal Methods

In this article, we will look into all the jQuery Traversal techniques available, with code samples of each.

Below are the list of of Traversal methods that jQuery provides:


.add()
.addBack()
.children()
.contents()
.each()
.end()
.filter()
.find()
.first()
.has()
.is()
.last()
.map()
.next()
.nextAll()
.nextUntil()
.not()
.offsetParent()
.parent()
.parentsUntil()
.prev()
.prevAll()
.prevUntil()
.siblings()
.slice()

.add()

It adds particular elements on selected item


$("div").css("border", "1px solid brown")
.add("span")

.addBack()

It causes previous elements to be added to the current set of elements


$("div").find("span").addBack().addClass("background");

.children()

It allows us to loop through the children elements in the DOM array.


var $child = $(e.target).children();
alert($child.length);

.contents()

It allows us to loop through the immediate child elements in the DOM array and construct a new jQuery element.


$("div").contents().filter(function(){ }).val("test");

.each()

It loops through the DOM elements from top to bottom.


$("div").each(function() {
$(this).addClass("test");
});

.end()

It ends the operation in the current chain and return the set of matched elements.


$("td").find("div").end().css("border", "1px blue solid");
});

.filter()

It filters the element and constructs a new jQuery object from a the matching elements


('ol').filter(':odd').css('background-color', 'aqua');
});

.find()

It allows us to search through the DOM elements


$("div").find($('span')).css('color','aqua');
});

.first()

It construct new object from the first element


$("span").first().css('color','aqua');
});

.has()

It constructs a new jQuery object from the matching elements


$("div").has("ol").addClass("testClass");
});

.is()

It allows us to test a condition without modifying the jquery object.


if ($("div").is(":contains('Test')")) {
$("#divTest").text("OK");
} 
});

.last()

It allows us to constructs a new jQuery object from the last element.


$('ol').last().css('background-color', 'aqua');

.map()

It is useful for getting or setting the value of a collection of elements.


$(':checkbox').map(function() {
return test;
}).get().join();

.next()

It gives us the next item available in the DOM structure when we do traversing.


$("div").next(".selected").css("background", "blue");

.nextAll()

It performs operations on all the next items in the DOM tree while traversing.


$("div").nextAll(".selected").css("background", "blue");

.not()

It outputs the elements that don't match the NOT condition.


$('div').not(document.getElementById('Test'))
.css('background-color', 'blue');

.offsetParent()

It outputs the parent of the present element in the DOM tree.


$('ol').offsetParent().css('background-color', 'aqua');

.parent()

It traverses one level up and returns the DOM object of the parent.


$('ol').parent().css('background-color', 'aqua');

.parentsUntil()

It traverses through the parent of the current DOM element until it reaches an element matched by the condition.


$('ol').parentsUntil().css('background-color', 'aqua');

.prev()

It searches for the predecessor or previous element of current DOM element in the tree


$('ol').prev().css('background-color', 'aqua');

.prevAll()

It searches for aLL the predecessor or previous element of current DOM element in the tree


$('ol').prevAll().css('background-color', 'aqua');

.prevUntil()

It searches for all the predecessor or previous element of current DOM element in the tree and stops when the search condition is matched.


$('ol').prevUntil("test").css('background-color', 'aqua');

.siblings()

It allows us to search through the siblings of current element in the DOM tree


$('div').siblings().css('background-color', 'aqua');

.slice()

It consist of start and end. Start index will find out the index where the slicing of the elements is to be done. End index will specify where to end the slicing.


$("div").text('$("span").slice(2,6).css("background", "yello");');

Hence you can start using these cool traversal techniques in your projects. If you have any question kindly post it in the comment section below: