关于parent()、parents()和closest()的区别

时间:2022-10-22 16:44:55

parent()、parents()和closest()方法两两之间有类似又有不同,在此简短的区分一下这三个方面。

1.parent()

描述:获得集合中每一个匹配元素的父级元素

示例:$('.item-1').parent().css('background-color','red');

  parent()方法从指定类型的直接父节点开始查找。parent()返回一个元素节点。


2.parents()

描述:获得集合中每个匹配元素的祖先元素

        示例:$('.item-1').parent('ul').css('background-color','red');

  parents()方法查找方式同parent()方法类似,不同的一点在于,当它找到第一个父节点时并没有停止查找,而是继续查找,最后返回多个父节点。


3.closest()

描述:从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素

示例:$('.item-1').closest('ul').css('background-color','red');

  closest()方法查找是从包含自身的节点找起,它同parents()方法类似,不同点就在于他只返回匹配的第一个元素节点。