Maison > Article > interface Web > Le nœud jQuery traverse le suivant, le précédent, les frères et sœurs - ipangjie

Le nœud jQuery traverse le suivant, le précédent, les frères et sœurs - ipangjie

巴扎黑original: 2017-06-22 13:10:563289parcourir

Lorsque l'on souhaite récupérer les éléments adjacents d'un élément dans

jquery, trois commandes peuvent être utilisées :

next() : utilisée pour get L'élément frère suivant.

prev() : utilisé pour obtenir l'élément frère précédent.

siblings() : utilisé pour obtenir tous les éléments frères et sœurs.

<!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>
    <title>jQuery中的节点遍历next下一个、prev上一个、siblings兄弟</title>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {            //next()方法用于获取节点之后的 挨着 的第一个同辈元素            //参数为空显示挨着 的第一个同辈元素    参数不为空就行匹配，如是参数元素显示，如不是显示空            //$(this).next("p").text()    点击aaaa返回弹出空  点击cccc显示dddd
            $("p").click(function() {
                alert($(this).next("p").text());
            });            //nextAll()nextAll()方法用于获取节点之后的所有同辈元素            //参数为空显示所有同辈元素的值    参数不为空就匹配，如是参数元素显示，如不是显示空            //$(this).nextAll().text() 点击aaaa返回弹出bbbbccccdddd  点击cccc显示dddd            //$(this).nextAll("p").text()    点击aaaa返回弹出ccccdddd  点击cccc显示dddd
            $("p").click(function() {
                alert($(this).nextAll("p").text());
            });            //prev、prevAll兄弟中之前的元素。    与next、nextAll相反
            $("p,p").click(function() {
                alert($(this).prev().text());
                alert($(this).prevAll().text());
                alert($(this).prev("p").text());
                alert($(this).prevAll("p").text());
            });            //siblings()方法用于获取所有同辈元素
            $("p,p").click(function() {
                alert($(this).siblings().text());
                alert($(this).siblings("p").text());
            });
        })        //案例：选中的p变色 $(this).css();$(this).siblings().css()        //案例：评分控件。prevAll,this,nextAll
    </script>

</head>
<body>
    <p>
        aaaa</p>
    <p>
        bbbb</p>
    <p>
        cccc</p>
    <p>
        dddd</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：Sélecteur précédent + suivant de JQueryArticle suivant：Sélecteur précédent + suivant de JQuery

Articles Liés

Voir plus