closest() 方法获得匹配选择器的第一个祖先元素

seanlook 发布于2019-08-23 17:00 / 1844人阅读

摘要：当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景定义和用法方法获得匹配选择器的第一个祖先元素，从当前元素开始沿树向上。详细说明如果给定表示元素集合的对象，方法允许我们检索树中的这些元素以及它们的祖先元素，并用匹配元素构造新的对象。

w3c: http://www.w3school.com.cn/jquery/traversing_closest.asp

本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景：

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

定义和用法
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

语法
.closest(selector)

参数	描述
selector	字符串值，包含匹配元素的选择器表达式。

参数描述
selector 字符串值，包含匹配元素的选择器表达式。
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：

.closest()	.parents()
从当前元素开始	从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。	沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象	返回包含零个、一个或多个元素的 jQuery 对象

GPU云服务器云服务器共有祖先元素 php 匹配数组元素匹配选择一个元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103652.html

jQuery DOM节点的遍历

摘要：只要符合，不管是儿子辈，孙子辈都可以与其他的树遍历方法不同，选择器表达式对于是必需的参数。方法以选定的元素为中心，往内查找可以通过方法。要一个一个给合集中每一个设置颜色，这里方法就是方法就是一个循环的迭代器，它会迭代对象合集中的每一个元素。 children()方法 jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.c...

Elle 2019-08-21 11:56 评论0 收藏0
读 Zepto 源码之集合元素查找

摘要：方法是将集合中不符合条件的元素查找出来。判断集合中的第一个元素是否匹配指定的选择器。这个在读源码之集合操作有讲过，如果集合个数大于零，则表示满足条件。返回集合中所有元素指定的属性值。获取集合中每个元素的前一个兄弟节点。这篇依然是跟 dom 相关的方法，侧重点是跟集合元素查找相关的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码...

DC_er 2019-08-20 16:53 评论0 收藏0
jQuery 常用方法

摘要：查找元素缩小匹配的范围，初始的对象集合中筛选不会有初始集合中的内容方法在命令链内调用，以便退回到前一个包装集。指定的样式属性返回的值返回的值事件属性相对于文档左边缘的鼠标位置。阻止事件的默认动作。触发该事件的元素。而方法会返回一个新的数组。 jQuery eq()和get() get(): jQuery对象转DOM对象。 eq(): jQuery对象构建新的jQuery对象。 $(s...

Alliot 2019-08-20 17:46 评论0 收藏0
jQuery is out of date

摘要：注同时移除元素上的事件及数据。其他对象通过其属性名进行迭代。原始数组不受影响。检查对象是否为空不包含任何属性。返回一个数字，表示当前时间。两者性能差不多接受一个标准格式的字符串，并返回解析后的对象。在我看来，jQuery确实已经过时了。本项目总结了绝大部分 jQuery API 替代的方法，类似项目You-Dont-Need-jQuery，并会再此基础上进行很多的补充。写这个项目主要...

duan199226 2019-08-21 11:30 评论0 收藏0
原生js替换jQuery各种方法-中文版

摘要：本项目总结了大部分替代的方法，暂时只支持以上浏览器。返回指定元素及其后代的文本内容。从服务器读取数据并替换匹配元素的内容。用它自己的方式处理，原生遵循标准实现了最小来处理。当全部被解决时返回，当任一被拒绝时拒绝。是创建的一种方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 评论0 收藏0