举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > jquery 遍历 jQuery 遍历 - end() 方法

jquery 遍历 jQuery 遍历 - end() 方法

2023-05-26 03:18 jQuery教程

jquery 遍历 jQuery 遍历 - end() 方法

jquery 遍历

jQuery 遍历是 jQuery 中最重要的功能之一,它可以帮助我们快速地查找和操作 DOM 元素。它可以让我们遍历 DOM 树,并对其中的元素进行操作。

$("div").each(function(){
    $(this).addClass("myClass");
});

jQuery 的遍历函数有很多,比如 each()、find()、children() 等等。each() 是最常用的遍历函数,它可以用来遍历 jQuery 对象中的所有元素。each() 函数会对 jQuery 对象中的每个元素都执行一次回调函数,回调函数中的 this 是当前正在处理的元素。

$("div").each(function(){  // 遍历 div 元素 

    if($(this).hasClass("myClass")){ // 如果当前元素有 myClass 类

        $(this).removeClass("myClass"); // 移除 myClass 类

    }else{

        $(this).addClass("myClass"); // 添加 myClass 类

    } 
}); 

find() 函数可以用来在当前 jQuery 元素集合中查找子元素,它会返回一个新的 jQuery 元素集合,包含所有匹配到的子元素。children() 函数也是用来查找子元素,但是它只会返回直接子元素,不会返回孙子、重孙子……之后的后代元素。

jQuery 遍历 - end() 方法

jQuery 遍历参考手册

实例

选择所有段落,找到这些段落中的 span 元素,然后将它们恢复为段落,并把段落设置为两像素的红色边框:

$("p").find("span").end().css("border", "2px red solid");

亲自试一试

定义和用法

end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。

语法

.end()

详细说明

大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例,并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时,应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集,可以使用 end() 从堆栈中弹出新集合。

假设页面中有一对很短的列表:

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

例子 1

主要是在利用 jQuery 的链条属性(命令链)时,jQuery 会比较有用。如果不使用命令链,我们一般是通过变量名来调用之前的对象,这样我们就不需要操作堆栈了。不过通过 end(),我们可以把所有方法调用串联在一起:

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

亲自试一试

这条命令链检索第一个列表中类名为 foo 的项目,并把它们的背景设置为红色。end() 会将对象还原为调用 find() 之前的状态,所以第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ,而不是在列表的 <li class="foo"> 中查找,并将匹配元素的背景设置为绿色。最后的结果是第一个列表中的项目 1 和项目 3 被设置了带颜色的背景,而第二个列表中的项目没有任何变化。

例子 2

这条长长的 jQuery 链可以可视化为结构化的代码块,筛选方法打开嵌套代码块,而 end() 方法用来关闭代码块:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

亲自试一试

最后这个 end() 不是必需的,因为我们随后会丢弃这个 jQuery 对象。不过,如果按照这种形式编写代码,end() 就能提供视觉上的对称,以及规整程序的感觉,至少对于开发者来说更易阅读,当然代价则是由于进行了额外的调用,会有一点点性能损失。

jQuery 遍历参考手册

阅读全文
以上是编程学为你收集整理的jquery 遍历 jQuery 遍历 - end() 方法全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部