网络进行时

在使用jquery时，很多时候都需要获取当前节点的父节点，包括直接父节点和祖先父节点。用的最多的方法是parent([expr])和parents([expr])。从方法的名字上就可以判断前一个方法是单数，也就是返回一个真正的父节点，后面是返回所有的祖先节点集合（不包含根节点）。假设需要获取当前节点的祖父节点（父节点的父节点），其有属性class=”pp”，那么获取的方法为：

$('#cur').parent().parent();
或
$('#cur').parent().parent('.pp');
或
$('#cur').parent('.pp');

上述操作在理想情况下，都没有问题。例如后来修改页面，在当前节点上又加了一个父节点，那么前两种获取的到的节点就不是当初节点；另外如果其祖先节点中还有属性class=”pp” 的节点，第三种获取的节点也不是自己想要的。

现在介绍另外一个获取父节点的方法closest([expr])。closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。否则返回一个空的jquery对象。

$('#cur').closest('.pp');

使用上述操作获取含义特定属性的祖父节点相对要安全一些，即使在当前节点和祖父节点中增加或者减少节点，只要增加的节点没有相同的属性，已有的js代码可能都不需要进行修改。

最后说一下closest和parents的主要区别是：

1. 前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找
2. 前者逐级向上查找，直到发现匹配的元素后 就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤
3. 前者返回0或1个元素，后者可能包含0 个，1个，或者多个元素

(1 人打了份: 平均分：3.00)

Loading...