partent()、partents()、closeset()区别

来源：互联网发布：上海华测导航待遇知乎编辑：程序博客网时间：2024/06/02 00:16

在做tab切换、删除时用到了closest()，我觉得比用partent()、和partents()效率要高，总结下三者的区别。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>partent、partents、closeset区别</title><link rel="stylesheet" href="css/rest.css" /><style>.container{width: 800px;padding: 20px;margin: 50px auto;border: 1px solid lightcoral;}.btn-cont{margin-top: 20px;}.btn-default{width: 50px;height: 32px;cursor: pointer;line-height: 32px;}</style></head><body><div class="container"><ul><li><a href="javascript:;"><span class="child1">我是span1</span></a></li><li><a href="javascript:;"><span class="child2">我是span2</span></a></li><li><a href="javascript:;"><span class="child3">我是span3</span></a></li></ul><div class="btn-cont"><button class="btn-default parent">parent</button><button class="btn-default parents">parents</button><button class="btn-default closest">closest</button></div></div></body></html><script src="js/jquery-1.9.1.min.js"></script><script>$(function(){//parent选择DOM元素或者DOM元素集的父节点,只向上搜索一层//parent只可以逐级往上查找父级，最先找到的是直接父级$(".parent").click(function(){var tagli1 = $(".child1").parent("li");var tagli2 = $(".child1").parent().parent("li");//逐级查找父级alert(tagli1.html());//返回undefined//返回<a href="javascript:;"><span class="child1">我是span1</span></a>alert(tagli2.html());});//parents选择DOM元素或者DOM元素集的祖先节点,返回的节点集是以从里到外的顺序排序的。//可以绕过直接父级去查找祖父级、曾祖父级$(".parents").click(function(){var tagli = $(".child2").parents("li");//返回<a href="javascript:;"><span class="child2">我是span2</span></a>alert(tagli.html());});//closest选择DOM元素或者DOM元素集的祖先节点,直到找到符合选择器的节点为止。//可以绕过直接父级去查找祖父级、曾祖父级$(".closest").click(function(){var tagli = $(".child3").closest("li");//返回<a href="javascript:;"><span class="child3">我是span3</span></a>alert(tagli.html());});});</script>

closest()与parents()区别:

closest()从自身开始向上遍历,直到找到一个适合的节点,返回的jQuery对象包含0个或者1个对象;

parents()从自身的父节点开始向上遍历，返回所有祖先节点,然后根据选择器对这些节点进行筛选，最终返回的jQuery对象可能包含0、1或者多个对象。

0 0