• 技术文章 >web前端 >前端问答

    jquery中closest方法怎么用

    长期闲置长期闲置2022-05-09 11:35:06原创218

    在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 元素。

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>123</title>
    <style>
    .ancestors *{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
    }
    </style>
    <script src="js/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("span").closest("ul").css({"color":"red","border":"2px solid red"});
    });
    </script>
    </head>
    <body class="ancestors">body (曾曾祖先节点)
    <div style="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>

    输出结果:

    06.png

    相关视频教程推荐:jQuery视频教程

    以上就是jquery中closest方法怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery中attr和val的区别是什么 下一篇:jquery中有没有index方法
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• jquery中replaceall方法怎么用• jquery怎么在元素内部增加元素• jquery怎么增加一个属性和值• jquery中怎么让th元素隐藏• jquery有几个基本选择器
    1/1

    PHP中文网