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

首页

web前端

js教程

使用jQuery进行遍历

PHPz

Sep 02, 2023 am 11:37 AM

jquery遍历简介

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

元素更改为两个  元素。
<!DOCTYPE html> <html lang="en"> <body> first middle last <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()注意：

<hr> 之前的状态。

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

在运行并创建用于选择元素的自定义过滤器之前，简单地向遍历

方法传递一个函数可能更有意义，该函数允许您检查包装器集中的每个元素的特定值场景。<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素包装在当前未使用该元素包装的 

例如，假设您希望将 HTML 页面中的所有 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素包装在当前未使用该元素包装的  元素中。filter() 方法，向其传递一个函数，该函数将确定该元素的父元素是否为  元素，如果否，则在使用  元素包装集合中剩余的 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 您可以创建一个自定义过滤器来完成此任务，或者您可以使用

方法，向其传递一个函数，该函数将确定该元素的父元素是否为 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素，然后向 filter() 方法传递一个用于迭代每个元素的函数（使用 this ) 在包装器集中，检查 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素的父元素是否为  元素，如果否，则在使用

元素包装集合中剩余的 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素之前，从集合中删除该元素。

! 运算符将布尔值 true 更改为 false。这是因为我想从以  元素作为父元素的集合中删除 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素。如果函数返回 false，则传递给 filter()在下面的示例中，我选择 HTML 页面中的每个 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素，然后向

方法传递一个用于迭代每个元素的函数（使用 this ) 在包装器集中，检查 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素的父元素是否为  元素。:findImgWithNoP - 对于单一情况可以通过简单地向filter方法传递一个可以进行自定义过滤的函数来避免。这个概念非常强大。考虑一下当我们将正则表达式测试与 filter()

<!DOCTYPE html>
<html lang="en">
<body>
    <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy"  alt="使用jQuery进行遍历" >
    <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy"  alt="使用jQuery进行遍历" >
    <p>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy"  alt="使用jQuery进行遍历" >
    </p>
    <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy"  alt="使用jQuery进行遍历" >
    <p>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy"  alt="使用jQuery进行遍历" >
    </p>
    <script></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。这是因为我想从以 <hr> 元素作为父元素的集合中删除 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用jQuery进行遍历" > 元素。如果函数返回 false，则传递给

方法的函数只会从集合中删除元素。

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

<!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></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 closest() 和 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()

<hr>

next() 最多只能返回一个元素。

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

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

以上是使用jQuery进行遍历的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。