jQuery DOM 遍历的澄清

Question

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

提前致谢！

Answer 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');

因此，构建等效的“临时”“DOM 遍历”功能是不是特别难。