我想知道当你使用选择器时jQuery如何遍历DOM.它是否查找每个"第一级"元素,然后查看每个元素?还是一个一个地看着那些"第一级"元素的每个孩子?
让我用一些简单的例子解释我想象的东西,给出以下选择器:
$("div p#target")
是否更像是:
[1] <div>
[3] <div>
[5] <p id="target"></p>
</div>
</div>
[2] <div>
[4] <div>
<p></p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
或者像:
[1] <div>
[2] <div>
[3] <p id="target"></p>
</div>
</div>
<div>
<div>
<p></p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
遍历发生的顺序与元素在 DOM 中的顺序相同:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>query traversal order</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="parent1">
<ul>
<li id="child1"></li>
<li id="child2"></li>
</ul>
</li>
<li id="parent2">
<ul>
<li id="child3"></li>
<li id="child4"></li>
</ul>
</li>
</ul>
<script type="text/javascript">
// keep a list of ids
var arr = [];
// loop over all li elements
$('li').each(function(){
// add their id to the array
arr.push($(this).attr('id'));
});
// show contents of the array
alert(arr.join(', '));
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这将提醒“parent1、child1、child2、parent2、child3、child4”;