jQuery如何使用most()方法？代码示例和解析

最新推荐文章于 2023-10-19 19:39:43 发布

夏天和雨伞

最新推荐文章于 2023-10-19 19:39:43 发布

阅读量158

点赞数

分类专栏： javascript 前端文章标签： js jquery javascript

本文链接：https://blog.csdn.net/u014240783/article/details/115287817

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

13 篇文章 0 订阅

订阅专栏

most()是jQuery中的内置方法, 该方法返回DOM树中所选元素的第一个祖先。此方法在搜索元素的第一个祖先时从当前元素向上遍历。文档对象模型(DOM)是万维网联盟的标准。这定义用于访问DOM树中的元素。

语法如下：

$(selector).closest(para1, para2);

参数：它接受下面指定的两个参数：

para1：这指定了在DOM树中叙述祖先搜索的元素。
para2：这是一个可选参数DOM元素, 可在其中找到匹配元素。

返回值：它返回所选元素的第一个祖先。

jQuery代码, 以显示mostest()方法的工作方式：

代码示例1：

在下面的代码中, 未传递可选参数。

<html>
  
<head>
    <style>
        .main * {
            display: block;
            border: 2px solid lightgrey;
            color: grey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/
               jquery/3.3.1/jquery.min.js"></script>
    <script>
    <!-- here is the script code for performing the method -->
        $(document).ready(function() {
            $("span").closest("ul").css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    </script>
</head>
  
<body class="main">
    This is great-great grand parent element !
    <div style="width:600px;">
        This is great grand parent element !
        <ul>
            This is the second ancestor element !
            <ul>
                <!-- This element will be selected -->
                This is first ancestor element !
                <li>This is direct parent !
                <span>This is span the child element !</span>
                </li>
            </ul>
        </ul>
    </div>
</body>
  
</html>

输出如下：

代码示例2：

在下面的代码中, 可选参数传递给该方法。

<html>
  
<head>
    <style>
        .main * {
            display: block;
            border: 2px solid lightgrey;
            color: grey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/
             jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
        <!--Here among dom id first ancestor will select -->
            var item = document.getElementById("dom");
            $("li").closest("ul", item).css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    </script>
</head>
  
<body class="main">
    This is great-great-grandparent !
    <div style="width:500px;">
        div (great-grandparent)
        <ul id="dom">
            This is second ancestor !
            <ul id="dom">
                This is first ancestor !
                <li>This is direct parent !
                <span>This is span the child one !</span>
                </li>
            </ul>
        </ul>
    </div>
</body>
  
</html>

输出如下：