jQuery .each() 返回 DOM 元素而不是 jQuery 对象

Java

使用jQuery的each()方法可以遍历一个jQuery对象中的每个元素，并对其执行相应的操作。一般情况下，each()方法返回的是一个jQuery对象，因为我们常常需要对每个元素进行链式操作。然而，有时候我们可能需要直接获取到DOM元素，而不是jQuery对象。本文将介绍如何在jQuery中使用each()方法返回DOM元素，并提供一个案例代码来加深理解。

首先，让我们来看一下each()方法的基本语法。在jQuery中，我们可以使用以下方式来调用each()方法：

Javascript
$(selector).each(function(index, element) {
  // 在这里执行操作
});

其中，selector是用于选择DOM元素的选择器，可以是任何有效的CSS选择器。function(index, element)是一个回调函数，用于处理每个元素。index表示当前元素在集合中的索引位置，element表示当前的DOM元素。

默认情况下，each()方法返回的是一个jQuery对象，即使在回调函数中对DOM元素进行了操作。然而，我们可以通过返回false来中断each()方法的执行，并返回一个新的jQuery对象。

现在，让我们来看一个具体的案例代码，来演示如何在each()方法中返回DOM元素。

html
<!DOCTYPE html>
<html>
<head>
  <title>jQuery each()方法返回DOM元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
  <h2>水果列表：</h2>
  <ul id="fruit-list">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>葡萄</li>
  </ul>
  <script>
    $(document).ready(function() {
      var fruits = [];
      $('#fruit-list li').each(function(index, element) {
        fruits.push(element);
      });
      
      console.log(fruits);
    });
  </script>
</body>
</html>

在这个案例中，我们有一个水果列表，其中包含了四种水果。我们使用了each()方法来遍历列表中的每个li元素，并将每个元素添加到一个名为fruits的数组中。

在控制台中，我们可以看到fruits数组中包含了四个DOM元素，而不是jQuery对象。这是因为在each()方法的回调函数中，我们将每个DOM元素添加到了fruits数组中，并返回了false来中断each()方法的执行。

通过这个案例，我们可以看到如何使用each()方法返回DOM元素而不是jQuery对象。这在某些情况下非常有用，特别是当我们需要直接操作DOM元素时。希望本文对你理解jQuery的each()方法有所帮助。