jquery中的closest方法如何用(closest,jquery,web开发)

时间:2024-05-08 10:52:10 作者 : 石家庄SEO 分类 : web开发
  • TAG :

在jquery中,closest方法用于返回被选元素的第一个祖先元素;该函数可从元素本身开始逐级向上匹配,并且返回最先匹配的元素,若没有匹配到则返回一个空的jQuery对象,语法为“元素对象.closest(匹配元素的选择器表达式)”。

本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。

jquery中closest方法怎么用

closest() 方法返回被选元素的第一个祖先元素。

祖先是父、祖父、曾祖父,依此类推。

从当前元素开始,沿 DOM 树向上遍历,并返回匹配所传递的表达式的第一个单一祖先,返回包含零个或一个元素的 jQuery 对象

closest()函数会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

语法为:

返回被选元素的第一个祖先元素:

$(selector).closest(filter)

返回使用 DOM context 查找的 DOM 树中的第一个祖先元素:

$(selector).closest(filter,context)

filter 必需。规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象。

context 可选。在其内可以找到匹配元素的 DOM 元素。

示例如下:

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>123</title><style>.ancestors*{display:block;border:2pxsolidlightgrey;color:lightgrey;padding:5px;margin:15px;}</style><scriptsrc="js/jquery.min.js"></script><script>$(document).ready(function(){$("span").closest("ul").css({"color":"red","border":"2pxsolidred"});});</script></head><bodyclass="ancestors">body(曾曾祖先节点)<divstyle="width:500px;">div(曾祖先节点)<ul>ul(第二祖先-第二祖先节点)<ul>ul(第一祖先-第一祖先节点)<li>li(直接父节点)<span>span</span></li></ul></ul></div></body><!--在这个例子中,$("span").closest("ul")指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div,jQuery跳过li元素继续查找下一个祖先,直到它找出我们要查找的ul.假如我们用parents()方法替代,它将返回ul的祖先。--></html>

输出结果:

jquery中的closest方法如何用

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:jquery中的closest方法如何用的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Java数组知识点有哪些下一篇:

3 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18