使用jQuery进行遍历-js教程-PHP中文网

使用jQuery进行遍历

PHPz

发布： 2023-09-02 11:37:03

原创

829人浏览过

find() 和 filter() 方法之间的区别

filter() 方法用于过滤包装器集中包含的当前元素集。它的使用应该留给需要过滤一组已选择的元素的任务。例如，下面的代码将过滤包装集中包含的三个

元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {  // Alerts middle, by filtering out the first
      // and last <p> elements in the wrapper set.
      alert($('p').filter(':not(:first):not(:last)').text());
  })(jQuery); </script>
</body>
</html>

登录后复制

注意：当使用 filter() 时，总是问自己是否绝对有必要。例如， $('p').filter(':not(:first):not(:last)') 可以不写 filter()$('p:not(:first) :not(:last)')。

另一方面，find() 方法可用于进一步查找当前所选元素的后代。认为 find() 更像是使用封装在已选择的元素中的新元素来更新或更改当前的包装集。例如，下面的代码将使用 find() 将包装集从

元素更改为两个 元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "strong"
      alert($('p').find('strong').get(0).nodeName);
  })(jQuery); </script>
</body>
</html>

登录后复制

注意：实际上，您可以使用 andSelf() 将使用 find() 方法之前的包装器中的元素与当前元素组合起来 - 例如$('p').find('strong').andSelf().

要带走的概念是 filter() 只会减少（或过滤）包装器集中当前选定的元素，而 find() 实际上可以创建一组全新的包装元素。

注意： find() 和 filter() 都是破坏性方法，可以使用 end() 撤消，这会将包装的集合恢复为使用 find() 或 filter() 之前的状态。

向 filter() 传递函数而不是表达式

在运行并创建用于选择元素的自定义过滤器之前，简单地向遍历 filter() 方法传递一个函数可能更有意义，该函数允许您检查包装器集中的每个元素的特定值场景。

例如，假设您希望将 HTML 页面中的所有使用jQuery进行遍历元素包装在当前未使用该元素包装的

元素中。

您可以创建一个自定义过滤器来完成此任务，或者您可以使用 filter() 方法，向其传递一个函数，该函数将确定该元素的父元素是否为

元素，如果否，则在使用

元素包装集合中剩余的使用jQuery进行遍历元素之前，从集合中删除该元素。

在下面的示例中，我选择 HTML 页面中的每个使用jQuery进行遍历元素，然后向 filter() 方法传递一个用于迭代每个元素的函数（使用 this ) 在包装器集中，检查元素的父元素是否为

元素。

<!DOCTYPE html>
<html lang="en">
<body>
    @@##@@
    @@##@@
    <p>
        @@##@@
    </p>
    @@##@@
    <p>
        @@##@@
    </p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      $('img').attr('src', 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif').filter(function () { return !$(this).parent('p').length == 1 }).wrap('<p></p>');
  })(jQuery); </script>
</body>
</html>

登录后复制

请注意，我正在使用 ! 运算符将布尔值 true 更改为 false。这是因为我想从以

元素作为父元素的集合中删除使用jQuery进行遍历元素。如果函数返回 false，则传递给 filter() 方法的函数只会从集合中删除元素。

要点是，如果您正在处理孤立的情况，请创建自定义过滤器 - 例如:findImgWithNoP - 对于单一情况可以通过简单地向filter方法传递一个可以进行自定义过滤的函数来避免。这个概念非常强大。考虑一下当我们将正则表达式测试与 filter() 方法结合使用时可能发生什么。

<!DOCTYPE html>
<html lang="en">
<body>
    <ul>
        <li>jQuery is great.</li>
        <li>It's lightweight.</li>
        <li>Its free!</li>
        <li>jQuery makes everything simple.</li>
    </ul>
    <script src="https://img.php.cn/"></script>
    <script>  (function($){ 
      // Wrap a <strong> element around any text within
      // a <li> that contains the pattern "jQuery"
      var pattern = /jQuery/i;
      $('ul li').filter(function () { return pattern.test($(this).text()); }).wrap('<strong></strong>');
  })(jQuery); </script>
</body>
</html>

登录后复制

向上遍历 DOM

您可以使用 parent()、parents() 和 closest() 方法轻松遍历 DOM 到祖先元素。了解这些方法之间的差异至关重要。检查下面的代码并确保您了解这些 jQuery 遍历方法之间的差异。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="parent2">
        <div id="parent1">
            <div id="parent0">
                <div id="start"></div>
            </div>
        </div>
    </div>
 
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "parent0" x4
      alert($('#start').parent().attr('id'));
      alert($('#start').parents('#parent0').attr('id'));
      alert($('#start').parents()[0].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent0').attr('id'));
      // Alerts "parent1" x4
      alert($('#start').parent().parent().attr('id'));
      alert($('#start').parents('#parent1').attr('id'));
      alert($('#start').parents()[1].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent1').attr('id'));
      // Alerts "parent2" x4
      alert($('#start').parent().parent().parent().attr('id'));
      alert($('#start').parents('#parent2').attr('id'));
      alert($('#start').parents()[2].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent2').attr('id'));
  })(jQuery); </script>
</body>
</html>

登录后复制

注意： closest() 和 parents() 可能看起来具有相同的功能，但 closest() 实际上会在其过滤中包含当前选定的元素.

closest() 一旦找到匹配项就会停止遍历，而 parents() 会获取所有父级，然后过滤您的可选选择器。因此，closest() 最多只能返回一个元素。