suchen

Heim  >  Artikel  >  Web-Frontend  >  Der jQuery-Knoten durchläuft next, prev, siblings – ipangjie

Der jQuery-Knoten durchläuft next, prev, siblings – ipangjie

巴扎黑
巴扎黑Original
2017-06-22 13:10:563308Durchsuche

Wenn wir die angrenzenden Elemente eines Elements in

jquery abrufen möchten, können drei Befehle verwendet werden:

next(): gewohnt get Das nächste Geschwisterelement.

prev(): wird verwendet, um das vorherige Geschwisterelement abzurufen.

siblings(): wird verwendet, um alle Geschwisterelemente abzurufen. 

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

Das obige ist der detaillierte Inhalt vonDer jQuery-Knoten durchläuft next, prev, siblings – ipangjie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der vorherige + nächste Selektor von JQueryNächster Artikel：Der vorherige + nächste Selektor von JQuery

In Verbindung stehende Artikel

Mehr sehen