jQuery DOM Traversal 的说明答案

【问题标题】：Clarification of jQuery DOM TraversaljQuery DOM Traversal 的说明
【发布时间】：2011-07-30 18:00:05
【问题描述】：

当他们说 DOM 遍历时，我不确定我是否完全理解这里的 jQuery 文档。这真的意味着遍历包装器对象中的 DOM 副本吗？在我看来，实际遍历是在选择元素时完成的，而使用 .get() 和 .next() 等方法实际上是在遍历 DOM 的副本。我是对的，还是我错过了什么？

提前致谢！

【问题讨论】：

【解决方案1】：

jQuery 函数返回一个对象。它具有数值属性，其值是对 DOM 元素的引用，而不是副本。所以给出以下内容：

<p id="p0">p0</p>
<p id="p1">p1</p>

<script>
var paragraphs = $('p');
</script>

paragraphs 将是一个对象，该对象具有“0”属性，其值是对 id 为 p0 的 p 元素的引用，而“1”属性是对 id 为 p1 的 p 元素的引用。您可以使用以下方式引用第一个 p：

paragraphs['0'];

jQuery 有助于“遍历 DOM”，因为您可以使用选择器（或多个选择器）来“收集”元素作为对象的属性，然后遍历该对象的数字属性并对其进行处理。所以要为上面的 p 元素添加一个类，你可以这样做：

paragraphs.each(function(i,el){$(el).addClass('newClass')})

纯 javascript 中的等价物是：

var paragraphs = document.getElementsByTagName('p');
var i = paragraphs.length;
while (i--) {
    myLib.addClass(paragraphs[i], 'newClass');
}

其中 myLib.addClass 是一个将类添加到 className 属性的简单函数。如果 addClass 函数更聪明一点，它可以接受元素引用的数组（或类似数组的对象），那么 POJS 版本将是：

myLib.addClass(document.getElementsByTagName('p'), 'newClass');

因此构建等效的ad hoc“DOM 遍历”功能并不是特别困难。

【讨论】：