Maison > Article > interface Web > Tutoriel sur l'utilisation de la méthode parentsUntil() dans jQuery
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 |
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)
参数列表:
实例:
实例一:
代码如下:
<!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!