Traversing

Contact Us or call 1-877-932-8228
Traversing

Traversing

Once you have a jQuery selection, you can find other elements using your selection as a starting point.

For complete documentation of jQuery traversal methods, visit http://api.jquery.com/category/traversing/.

Be cautious with traversing long distances in your documents -- complex traversal makes it imperative that your document's structure remain the same, something that's difficult to guarantee even if you're the one creating the whole application from server to client. One or two-step traversal is fine, but you generally want to avoid traversals that take you from one container to another.

Traversal Methods

A useful subset of jQuery's traversal methods is listed below. For most of them, the only parameter choices are none or an optional selector that is used to filter the set of elements returned. For example, the next() method returns the element after the current element. next(selector) returns the element that follows the current element only if it matches the selector. In other words, next('p') doesn't return the next p tag -- it returns the next element if and only if it is a p tag.

Method Description Parameters
find finds descendant elements that match the parameter; uses the current collection as the context for a selector selector, elements, jQuery
children finds all children, optionally filtered by a selector none, selector
parent finds the parent element of each element in the current set none, selector
offsetParent finds first positioned ancestor of each element in the current set none
closest finds the closest ancestor element of each element in the current set none, selector
next finds the next sibling of each element in the current set none, selector
prev finds the previous sibling of each element in the current set none, selector
nextAll finds all following siblings of each element in the current set none, selector
prevAll finds all preceding sibling of each element in the current set none, selector
siblings finds all the siblings of each element in the current set none, selector

Moving Around the DOM Using Traversal Methods

Code Sample:

jqy-concepts/Demos/traversal-methods.html
---- C O D E   O M I T T E D ----
$(document).ready(function() {
	$('h1').next('p').addClass('redText');
	$('input[name=first_name]').closest('form').addClass('yellowBg');
	$('input[name=first_name]').parent().addClass('redText');
	$('#myList').children().addClass('redText');
	
	// below doesn't work as expected if more than
	// one element is selected
	$('li.selected').siblings().addClass('italic');
	
	// but this does work as expected
	$('li:not(.selected)').addClass('blueText');
});
</script>

---- C O D E   O M I T T E D ----
</head>
<body>
<h1>Heading</h1>
<p>A paragraph (will be red)</p>
<p>Another paragraph (won't be red)</p>
<h1>Heading</h1>
<h3>A heading 3</h3>
<p>Another paragraph (won't be red)</p>
<form>
	<label>First name: <input type="text" name="first_name" /></label>
	<label>Last name: <input type="text" name="last_name" /></label>
</form>
<ul id="myList">
	<li>A</li>
	<li class="selected">B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
</ul>
</body>
</html>

Solution:

jqy-concepts/Solutions/js/sandbox-traversing.js
$(document).ready(
	function() {

		// Get all the image elements on the page; log each image's
		// alt attribute.
		$('img').each(function(i) {
			console.log($(this).attr('alt'));
			//console.log(this.alt);
		});
		
		// Get the search input text box, then traverse up to the form
		// and add a class to the form that contains it.
		$('input[name="q"]').closest('form').addClass('showMe');
		
		// Get the list item inside #myList that has a class of 'current'
		// and remove that class from it; add a class of 'current'
		// to the next list item.
		$('#myList li.current')
			.removeClass('current')
			.next()
				.addClass('current');
		
		// Get the select element inside #specials; traverse your way to
		// the submit button.  Set its disabled attribute to true.
		$('#specials select')
			.parent()  // Could also use closest('form')
			.next()    // instead of these two lines
			.find('input.input_submit')
				.attr('disabled', true);
		
		// Get the first list item in the #slideshow element; add the class
		// 'current' to it, and then add a class of 'disabled' to its
		// sibling elements.
		$('#slideshow li:first')
			.addClass('current')
			.siblings()
				.addClass('disabled');
	}
);
Next