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

Posted 2021-04-08 JAVA早餐

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

HTML

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

1. div.container是包裹元素；

2. div.photo、div.title、div.rating是div.container的直接子级；

3. 每个div.star是div.rating的子级；

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

为什么要遍历？

“为什么我们要进一步提炼一系列元素，难道是jQuery选择语法不够强大？”

好，让我们从示例开始。在上面提到的网页中，当一个star被点击时，我们需要给它以及左边的每个star添加class“on”。与此同时，我们要改变所有star父元素的背景颜色，因此，我们的代码如下：

$('.star').click(function(){

         $(this).addClass('on');

//       如何选取当前对象的父元素?

//       如何获得当前star左侧所有的star?

});

在第二行，我们得到了我们点击的当前对象。但是，如何得到stars的父级？即div.rating。但是，在一个页面中，有很多div.rating。哪一个是我们想要的？如何获得“this”左边所有的star？

可喜的是，jQuery允许我们基于这些基层关系，在现存集合的基础上获得新的元素集合。而这些正是遍历函数发挥作用的地方。

1、children

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

在很多情况下会很方便，看看下面这张图：

1. 开始的时候容器中的star全部被选择；

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

3. 如果chilidren()每接受任何参数，将返回所有直接子级；

4. 不返回孙级元素。

2、filter

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

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

3、not

与filter恰恰相反，not()从集合中移除匹配的元素。

看下面这个例子。偶数列的star从选择集合中移除，留下的是奇数行的star。

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

4、add

如果我们想在集合中增加一些元素怎么办？add()函数正是做这件事的。

同样简单明了，photo盒子被添加到集合中。

5、slice

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

1. 第一个参数是从零开始的第一个元素的位置，它包含在返回的片段中；

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

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

6、parent

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

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

7、parents

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

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

8、siblings

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

看看这个例子：

1. 谁是第一个star的兄弟节点？其它的四个，对不？

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

9、prev & prevAll

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

10、next & nextAll

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

结论

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

$('.star').click(function(){

         $(this).addClass('on');

//       如何取得当前对象的父级?

         $(this).parent().addClass('rated');

//       如何获得当前对象左侧的star?

         $(this).prevAll().addClass('on');

         $(this).nextAll().removeClass('on');

});

这就是这篇教程中早期提到的问题，对吗？在这几行代码中我们使用了这几个遍历函数。

1. 在第5行，看看parent()函数，啊哈，真简单。

2. 在第8行和9行，prevAll()和nextAll().选择填充的star和空的star。

现在，遍历函数是做么的方便。当在一起使用时，它们将更加强大。也就是说，一个函数的输出是另一个函数的输入，它们是链式的。

谢谢你的拜读，希望这篇教程在你通过jQuery选择html元素时更容易。你有什么想法？哪个遍历函数是我们遗漏的？

java海量视频资源免费获取、java最新资讯、新闻每日更新。

请长按图片，关注下方二维码

亲们，所有资源全部免费，视频均来源于网络，若发现个别资源失效，请及时联系早餐君，早餐君发现后会立即修改连接。你们的支持使我们坚持的动力！