[分享]揭秘jQuery遍历技巧：轻松掌握this的奥秘

引言jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 HTML 文档的遍历、事件处理、动画和 Ajax 操作。在 jQuery 中，遍历 DOM 树是一个常见且重要的操作。理解...

引言

jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 HTML 文档的遍历、事件处理、动画和 Ajax 操作。在 jQuery 中，遍历 DOM 树是一个常见且重要的操作。理解如何正确使用 this 关键字在遍历过程中至关重要。本文将深入探讨 jQuery 遍历技巧，并揭示 this 的奥秘。

jQuery 遍历简介

在 jQuery 中，遍历 DOM 树通常使用 .each() 方法。.each() 方法对每个匹配的元素执行一个函数，并返回一个 jQuery 对象。这个方法接受一个回调函数，该函数接收当前元素的 DOM 元素作为参数。

$('selector').each(function(index, element) { // 这里可以访问到当前元素
});

理解 this 的作用

在 .each() 方法中，this 关键字指向当前迭代的 DOM 元素。这意味着，如果你想在遍历过程中访问当前元素，你应该使用 this。

使用 this 访问属性

假设我们有一个列表，我们想要遍历这个列表并为每个列表项添加一个类：

$('ul li').each(function() { $(this).addClass('new-class');
});

在上面的代码中，this 指向当前迭代的

$('button').each(function() { $(this).click(function() { alert('Button clicked!'); });
});