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

5、slice

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

6、parent

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

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

7、parents

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

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

8、siblings

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

看看这个例子：

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');

});

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

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

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