6.JQuery遍历
(5)closest()方法
以选定的元素为中心,往内查找可以通过find、children方法。如果往上查找,也就是查找当前元素的父辈祖辈元素,jQuery提供了closest()方法,这个方法类似parents但是又有一些细微的区别,属于使用频率很高的方法
closest()方法接受一个匹配元素的选择器字符串
从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素
例如:在div元素中,往上查找所有的li元素,可以这样表达
$("div").closet("li')
注意事项:在使用的时候需要特别注意下
粗看.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了
- 起始位置不同:.closest开始于当前元素 .parents开始于父元素
- 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,知道找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合
- 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象
例子:
$("button:last").click(function(){ var itemB = $('.item-b'); $('li.item-1').closest(itemB).css('border', '1px solid blue'); });