jquery ------ 10个强大的遍历函数

转载 2012年03月21日 17:54:30

在下面提到的网页中,当一个star被点击时,我们需要给它以及左边的每个star添加class“on”。

首先,让我们看看下图所示的简单的页面,通过这个教程我们将选择这些元素。

示例

◆div.container是包裹元素;

◆div.photo、div.title、div.rating是div.container的直接子级;

◆每个div.star是div.rating的子级;

◆当div.satr的class为“on”时,它是一个完整的star。

 

与此同时,我们要改变所有star父元素的背景颜色,因此,我们的代码如下:

  1. $('.star').click(function(){
  2. $(this).addClass('on');
  3. // 如何选取当前对象的 父元素?
  4. // 如何获得当前star左侧所有的star?
  5. });

在第二行,我们得到了我们点击的当前对象。但是,如 何得到stars的父级?即div.rating。但是,在一个页面中,有很多div.rating。哪一个是我们想要的?如何获得“this”左边所有 的star?可喜的是,jQuery允许我们基于这些基层关系,在现存集合的基础上获得新的元素集合。而这些正是遍历函数发挥作用的地方。

 

1、children

这个函数得到一组元素的直接子级。

在很多情况下会很方便,看看下面这张图:

children

◆开始的时候容器中的star全部被选择;

◆给children()传递一个选择表 达式将选择结果缩小至选中的star;

◆如果chilidren()每接受任何 参数,将返回所有直接子级;

◆不返回孙级元素。

2、filter

这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除。

filter

下面的这个例子直截了当。从 5个star中过滤出class为“on”的star。

3、not

与filter恰恰相 反,not()从集合中移除匹配的元素。看下面这个例子。偶数列的star从选择集合中移除,留下的是奇数行的star。

not

“ 注意:'Even'和'odd'选择器是从0开始的,从0开始计数,不是从1。”

4、add

如果我们想在集合中增加一些元素怎么办?add()函 数正是做这件事的。同样简单明了,photo盒 子被添加到集合中。

add

 

5、slice

有时候,我们需要根据元素在集合的位置获取集合的子集。sliece()正是做这个的。

slice

◆第一个参数是从零开始的第一个元素的位置,它包含在返回的片段中;

◆第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略,将延伸至集合的末尾;

所以,slice(0,2)将选取前两个star。

6、parent

parent()函数选取一系列元素的直接父级。

parent

正如下图所示,第一个star的 直接父级被选中。非常方便,应当指出,它仅仅返回直接父级,为什么很奇特?因为没有祖父元素或祖先元素被选中。

7、parents

这是复数形式,parents()选 择集合的所有祖先元素。我的意思是所有祖先元素包括直接父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。

parents

通过给parents()传 递.container参数,div.container将被选中,它实际上第一个star的祖父。

8、siblings

这个函数选择一组元素的所有兄弟姐妹,传递一个表达式可以筛选结果。看看这个例子:

siblings

如图所示,“odd”的节点被选中。索引是从零开始的,看看下面star的红色数字。

9、prev & prevAll

prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节点。如果你正在构建一个星级部件,这将相当方便。第三个star前面的兄弟节 点被选中。

prev & prevAll

10、next & nextAll

next & nextAll

这些函数与prev和prevAll工作方式相同,不过它选择的是下一个兄弟姐妹。

结论

最后,让我们来看看如何利用这些函数来解决现实世界中令我们头痛的问题。

  1. $('.star').click(function(){
  2. $(this).addClass('on');
  3. // 如何取得当前对象的 父级?
  4. $(this).parent().addClass('rated');
  5. // 如何获得当前对象左 侧的star?
  6. $(this).prevAll().addClass('on');
  7. $(this).nextAll().removeClass('on');
  8. });

这就是这篇文章中早期提到的问题,对吗?在这几行代码中我们使用了这几个遍历函数。

在第8行和9行,prevAll()和nextAll()。选择填充的star和空的star。现在,遍历函数是做么的方便。当在一起使用时,它们将更加强大。也就是说,一个函数的输出是另一个函数的输 入,它们是链式的。

 

                         原文取自:http://developer.51cto.com/ ;

                

jQuery中10个强大的遍历函数

为什么我们要进一步提炼一系列元素,难道是jQuery选择语法不够强大?让我们从示例开始。在下面提到的网页中,当一个star被点击时,我们需要给它以及左边的每个star添加class“on”。首先,让我...
  • serialization_
  • serialization_
  • 2013年01月16日 14:21
  • 355

jQuery中10个常用的遍历函数

使用jQuery,可以 很容易的选择HTML元素。但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情。在这篇教程中,我们将探讨十种方 法去精炼和扩展我们将要操作的集合。 HT...
  • u014403266
  • u014403266
  • 2017年05月19日 22:34
  • 241

使用eval函数来解析json对象,并且使用jquery的each方法来遍历

var dataObj=eval("("+data+")");//转换为json对象 为什么要 eval这里要添加 “("("+data+")");//”呢? 原因在于:eval本身的问题。...
  • yibuyimeng
  • yibuyimeng
  • 2014年06月13日 19:25
  • 1031

JQuery 遍历List,数组等

 JQuery 遍历List,数组等 博客分类: JQuery   Java代码   1.jquery遍历对象    "-//W3C//DTD HT...
  • chenbindsg
  • chenbindsg
  • 2017年04月10日 12:28
  • 4510

10个最好的 jQuery 视频插件

在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能。可以显示视频和视频播放列表。   1. Bigvideo.js   BigVideo...
  • gxchen0802
  • gxchen0802
  • 2014年03月12日 10:45
  • 601

总结的php10个常用的处理字符串的函数事例

1.确定一个字符串的长度 这是文章中最明显的一个例子,其中的问题是我们如何来确定一个字符串的长度 ,这里我们不能不提的就是strlen()函数: $text = "sunny day"; $c...
  • u011212968
  • u011212968
  • 2013年08月27日 17:34
  • 645

js中的遍历和jquery中的遍历

1.map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 使用实例: var ary = [12,23,24,42,1]; var res = ary.map(...
  • likeuzi
  • likeuzi
  • 2017年04月12日 09:55
  • 7975

jQuery遍历对象/数组/集合

转载自: 网络        1.jquery 遍历对象      "-//W3C//DTD HTML 4.0 Transitional//EN">             New Do...
  • liyongke89
  • liyongke89
  • 2016年02月22日 08:18
  • 2714

css —— 选择器优先级及jQuery遍历元素常用方法

一、部分常用css选择器 1、子元素选择器:> 作用:只选取直接子元素。 优点:使html元素层次很清晰的呈现。 2、相邻兄弟元素选择器:+ 作用:选取相邻兄弟元素中的第二个。适用于兄弟元素(可以...
  • qq_19865749
  • qq_19865749
  • 2016年07月26日 09:23
  • 1267

用jquery的each方法介绍及遍历json对象

用jquery的each方法遍历json对象 //1.首先定义一个json对象jsonStu,保存学生的"姓名"和"分数"信息. //2.然后,通过调用$.each(...
  • daimomo000
  • daimomo000
  • 2016年12月29日 11:40
  • 5153
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery ------ 10个强大的遍历函数
举报原因:
原因补充:

(最多只允许输入30个字)