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”。首先,让我...
  • yenange
  • yenange
  • 2012年07月23日 15:29
  • 986

jQuery中10个非常有用的遍历函数

jQuery中10个非常有用的遍历函数

jQuery中10个常用的遍历函数

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

10个有趣强大的 jQuery导航教程/插件分享

使用jQuery能够做出令人称奇的效果,而且轻而易举。在导航制作领域,jQuery没有对手。虽然并不是所有的人都精通jQuey,但学会并使用它们并不难。  网上有许多的jQuery导航教程,可以...
  • aerchi
  • aerchi
  • 2011年12月16日 16:10
  • 1274

jquery遍历函数siblings()

siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合。返回匹配元素集合 ...

JQuery中遍历函数的分类整理

JQuery中包含了很多非常强大的遍历函数,用于进行集合操作。本片文章会列出常用的...

jquery 遍历筛选数组有多种方法与函数

grep grep()方法用于数组元素过滤筛选 grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过滤元素,该函数中...
  • Howst
  • Howst
  • 2014年06月19日 11:52
  • 480

jQuery遍历函数 each

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。 函数 描述 .add() 将元素添加到匹配元素的集合中。 .andSelf() 把堆栈中之前的元素集添加到当前集合中。 .chi...

jQuery 遍历函数 each

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。 函数 描述 .add() 将元素添加到匹配元素的集合中。 .andSelf() ...
  • wybshyy
  • wybshyy
  • 2016年09月12日 16:20
  • 296

jQuery源码分析-11 DOM遍历-Traversing-3个核心函数

作者:nuysoft/高云 QQ:47214707 Email:nuysoft@gmail.com  声明:本文为原创文章,如需转载,请注明来源并保留原文链接。 jQuery源码分析系列(持续更新...
  • mychirs
  • mychirs
  • 2014年10月11日 16:47
  • 351
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery ------ 10个强大的遍历函数
举报原因:
原因补充:

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