suchen

Heim >Web-Frontend >js-Tutorial >Wie bekomme ich Geschwisterelemente mit jQuery? (Codebeispiel)

Wie bekomme ich Geschwisterelemente mit jQuery? (Codebeispiel)

不言
不言nach vorne
2019-01-18 10:50:532239Durchsuche

Der Inhalt dieses Artikels befasst sich damit, wie jQuery Geschwisterelemente erhält. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.

① $(this).next(); Was erhalten wird, ist das nächste Geschwisterelement des aktuellen Elements

②$(this).nextAll(); ist das aktuelle Element. Alle nachfolgenden Geschwisterelemente

③$(this).prev();                                                                        die Geschwisterelemente vor dem aktuellen Element

⑤$(this).siblings( ); Was erhalten wird, sind alle Geschwisterelemente des aktuellen Elements (außer sich selbst)

Fallübung:

Anforderungsanalyse: Wenn die Maus Text eingibt, wird der Hintergrund des aktuellen Textes rot . Wenn Sie darauf klicken, wird die Hintergrundfarbe des Textes vor dem aktuellen Text gelb und die Hintergrundfarbe des Texts dahinter wird blau. Wenn die Maus herausbewegt wird, werden alle Hintergrundfarben aufgehoben :

Der Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            margin: 100px auto;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
//         $(function () {
//             //获取ul->li
//             $("ul>li").mouseenter(function () {
//                 $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
//             }).mouseleave(function () {
//                 $(this).css("backgroundColor","").siblings().css("backgroundColor","");
//             }).click(function () {
//                 //当前元素前面的所有兄弟元素背景颜色为黄色
//                 //$(this).prevAll().css("backgroundColor","yellow");
//                 //当前元素后面的所有兄弟元素背景颜色为蓝色
//                 //$(this).nextAll().css("backgroundColor","blue");
// 
//                 //链式编程代码
//                 //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
//                 //解决断链--->恢复到断链之前的一个效果--修复断链
//                 //.end()方法恢复到断链之前的效果
//                 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
//             });
//         });

            $(function(){
                //链式编程  鼠标进入--鼠标点击--鼠标移出
                //$("ul>li").mouseover().click().mouseout();
                $("ul>li").mouseover(function(){
                    $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
                }).click(function(){
                    $(this).prevAll().css("backgroundColor","yellow");
                    $(this).nextAll().css("backgroundColor","blue");
                }).mouseout(function(){
                    $("ul>li").css("backgroundColor","");
                });
            });
    </script>
</head>
<body>
<ul>
    <li>青岛啤酒（TsingTao）</li>
    <li>瓦伦丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奥丁格教士（Franziskaner）</li>
    <li>科罗娜喜力柏龙（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>罗斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>爱士堡（Eichbaum）</li>
    <li>哈尔滨牌蓝带</li>
</ul>

</body>
</html>

Hinweis: Der obige Code ist in den Zeilen 49 und 50 aufgeführt kann in eine Zeile komprimiert werden, wodurch eine neue Methode

end(); eingeführt wird, die zur Wiederherstellung der kurzen Kette verwendet wird.

Original zwei Codezeilen: 

$(this).prevAll().css("backgroundColor","yellow");
$(this).nextAll().css("backgroundColor","blue");

Geänderter Code: 

 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

Das obige ist der detaillierte Inhalt vonWie bekomme ich Geschwisterelemente mit jQuery? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：JQuery-Animation hide() und show() Verwendungserklärung 2 (Codebeispiel)Nächster Artikel：JQuery-Animation hide() und show() Verwendungserklärung 2 (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen