Tutoriel sur l'utilisation de la méthode parentsUntil() dans jQuery-js tutoriel-php.cn

Tutoriel sur l'utilisation de la méthode parentsUntil() dans jQuery

巴扎黑

Libérer： 2017-06-24 09:19:44

original

1388 Les gens l'ont consulté

Cet article présente principalement l'utilisation de la méthode parentsUntil() dans jQuery Il analyse la fonction et la définition de la méthode parentsUntil() avec des exemples et trouve tous les ancêtres de la correspondance. éléments basés sur des conditions. Pour obtenir des conseils sur l'utilisation des éléments, les amis dans le besoin peuvent se référer à

Cet article explique l'utilisation de la méthode parentsUntil() dans jQuery avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Cette méthode trouve tous les éléments ancêtres de l'élément correspondant jusqu'à ce qu'elle rencontre l'élément qui correspond à l'expression exprexpression, l'élément DOM ou l'élément jQuery.
L'obtention de la collection d'éléments ancêtres peut être filtrée en filtrant les expressions.

Remarque : les éléments ancêtres ne contiennent pas d'éléments correspondant aux expressions expr, aux éléments DOM ou aux éléments jQuery.

Grammaire :

Grammaire 1 :

Le code est le suivant :

$(selector).parentsUntil(expr,filter)

Copier après la connexion

Liste des paramètres :

< tr style="background-color: rgb(214,214,214); word-wrap: break-word" class="firstRow">

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

Description<🎜><🎜>

expr<🎜>

Facultatif. Expression utilisée pour filtrer les éléments ancêtres. <🎜>

filter<🎜>

Facultatif. Utilisé pour filtrer la collection obtenue d'éléments ancêtres. <🎜>

实例:

实例一:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<
head
>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
            <ul class="second">
                <li>HTML专区</li>
                <li>Javascript专区</li>
                <li>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>

Copier après la connexion

实例二:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
            <ul class="second">
                <li>HTML专区</li>
                <li>Javascript专区</li>
                <li>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>

Copier après la connexion

语法二:

代码如下:

$(selector).parentsUntil(element,filter)

Copier après la connexion

参数列表:

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

实例:

实例一:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
            <ul class="second">
                <li>HTML专区</li>
                <li>Javascript专区</li>
                <li>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>

Copier après la connexion

实例二:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
            <ul class="second">
                <li>HTML专区</li>
                <li>Javascript专区</li>
                <li>p+CSS专区</li>
                <li>Jquery专区</li>
            </ul>
        </p>
    </p>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!