jQuery traversal

What is traversal?

jQuery traversal, meaning "move", is used to "find" (or select) HTML elements based on their relationship to other elements. Start with a selection and move along this selection until you reach your desired element.

The picture below shows a family tree. With jQuery traversal, you can easily move up (ancestors), down (descendants), and horizontally (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing the DOM.

Illustration analysis:

The<div> element is the parent element of <ul> and is the ancestor of all content within it.

The <ul> element is the parent element of the <li> element and is also the child element of <div>

The <li> element on the left is the parent of <span> Element, a child element of <ul>, and a descendant of <div>.

The<span> element is a child of <li> and a descendant of both <ul> and <div>.

Two <li> elements are siblings (have the same parent element).

The <li> element on the right is the parent element of <b>, the child element of <ul>, and the descendant of <div>.

The<b> element is a child of the <li> on the right and a descendant of both <ul> and <div>.

Traversing the DOM

jQuery provides a variety of methods for traversing the DOM.

The largest type of traversal method is tree traversal (tree-traversal).

Next Section

new file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			 $("button").click(function(){
				 $("li").each(function(){
				 alert($(this).text())
				 });
			 });
		});
	</script>
</head>
<body>
 <button>输出每个列表项的值</button>
	<ul>
	<li>Coffee</li>
	<li>Milk</li>
	<li>Soda</li>
	</ul>
</body>
</html>

submit Reset Code

Automatic operation

Full Screen