Maison >interface Web >js tutoriel >Tutoriel sur l'utilisation de la méthode parentsUntil() dans jQuery

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

巴扎黑original: 2017-06-24 09:19:441396parcourir

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)

Liste des paramètres :

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>

实例二:

代码如下:

<!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>

语法二:

代码如下:

$(selector).parentsUntil(element,filter)

参数列表:

参数	描述
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>

实例二:

代码如下:

<!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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pièges rencontrés dans les opérations et solutions réelles du projet VueArticle suivant：Pièges rencontrés dans les opérations et solutions réelles du projet Vue

Articles Liés

Voir plus