欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery中parentsUntil()方法用法实例教程

程序员文章站 2023-10-28 15:44:22
本文实例讲述了jquery中parentsuntil()方法用法。分享给大家供大家参考。具体分析如下: 此方法查找匹配元素的所有的祖先元素,直到遇到expr表达式、dom元素或者...

本文实例讲述了jquery中parentsuntil()方法用法。分享给大家供大家参考。具体分析如下:

此方法查找匹配元素的所有的祖先元素,直到遇到expr表达式、dom元素或者jquery元素匹配的那个元素为止。
取得祖先元素集合可以通过筛选表达式进行筛选。

注意:祖先元素中并不包含expr表达式、dom元素或者jquery元素匹配的元素。

语法:

语法一:

代码如下:

$(selector).parentsuntil(expr,filter)

 

参数列表:

参数 描述
expr 可选。用于筛选祖先元素的表达式。
filter 可选。用于对取得的祖先元素集合进行筛选。

 

实例:

实例一:

 

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.cnblogs.com/" />
<title>博客园</title>
<script type="text/javascript" src="mytest/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li").parentsuntil(".inner").css("border","1px solid blue");
    })
</script>
</head>
<body>
    <p class="outer">
        <p>博客园欢迎您</p>
        <p class="inner">
            <ul class="first">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
 &nbnbsp;          </ul>
            <ul class="second">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>

 

实例二:

 

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.cnblogs.com/" />
<title>博客园</title>
<script type="text/javascript" src="mytest/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li").parentsuntil(".inner",".second").css("border","1px solid blue");
    })
</script>
</head>
<body>
    <p class="outer">
        <p>博客园欢迎您</p>
        <p class="inner">
            <ul class="first">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
            </ul>
            <ul class="second">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>

 

语法二:

代码如下:

$(selector).parentsuntil(element,filter)

 

参数列表:

参数 描述
element 可选。用于筛选祖先元素的dom元素或者jquery元素
filter 可选。用于对取得的祖先元素集合进行筛选。

 

实例:

实例一:

 

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.cnblogs.com/" />
<title>博客园</title>
<script type="text/javascript" src="mytest/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li").parentsuntil(document.getelementbyid("inner")).css("border","1px solid blue");
    })
</script>
</head>
<body>
    <p class="outer">
        <p>博客园欢迎您</p>
        <p id="inner">
            <ul class="first">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
            </ul>
            <ul class="second">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>

 

实例二:

 

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.cnblogs.com/" />
<title>博客园</title>
<script type="text/javascript" src="mytest/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li").parentsuntil(document.getelementbyid("inner"),".second").css("border","1px solid blue");
    })
</script>
</head>
<body>
    <p class="outer">
        <p>博客园欢迎您</p>
        <p id="inner">
            <ul class="first">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
            </ul>
            <ul class="second">
                <li>html专区</li>
                <li>javascript专区</li>
                <li>div+css专区</li>
                <li>jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>