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

使用jQuery进行遍历

PHPz

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

原创

878人浏览过

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 页面中的所有 <img alt="使用jQuery进行遍历" > 元素包装在当前未使用该元素包装的  元素中。

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


                        
                            
                        
                        
                            行者AI
                            行者AI绘图创作，唤醒新的灵感，创造更多可能
                            
                                
                                100
                            
                        
                        
                            查看详情

元素，如果否，则在使用  元素包装集合中剩余的 <img alt="使用jQuery进行遍历" > 元素之前，从集合中删除该元素。

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

<!DOCTYPE html>
<html lang="en">
<body>
    <img>
    <img>
    <p>
        <img>
    </p>
    <img>
    <p>
        <img>
    </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。这是因为我想从以  元素作为父元素的集合中删除 <img alt="使用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() 最多只能返回一个元素。

遍历方法接受 CSS 表达式作为可选参数

CSS 表达式不仅可以传递给 jQuery 函数来选择元素，还可以传递给多个遍历方法。可能很容易忘记这一点，因为许多遍历方法的功能根本不需要使用任何表达式 - 例如next().对于以下遍历方法，表达式是可选的，但请记住，您可以选择提供用于过滤的表达式。

children('表达式')
next('表达式')
nextAll('表达式')
parent('表达式')
父母（'表达'）
prev('表达式')
prevAll('表达式')
siblings('表达式')
closest('表达式')

以上就是使用jQuery进行遍历的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

解决Anime.js无法动画化jQuery动态加载SVG的问题 Google 表格与日历集成：自动化事件创建与去重指南利用Google Apps Script自动化Google表单与日历事件同步避免 ENOTDIR 错误：在 Node.js 中安全地遍历目录使用Array.some()简化JavaScript中多条件布尔判断