jQueryで兄弟要素を取得するにはどうすればよいですか? (コード例)-jsチュートリアル-php.cn

jQueryで兄弟要素を取得するにはどうすればよいですか? (コード例)

不言

リリース： 2019-01-18 10:50:53

転載

2185 人が閲覧しました

この記事の内容は、jQuery が兄弟要素をどのように取得するかについてです。 (コードサンプル) は、参考にしていただければ幸いです。

① $(this).next(); 取得されるのは現在の要素の次の兄弟要素です

②$(this).nextAll();は現在の要素です後者の後ろにあるすべての兄弟

③ $ (this) .prev () は現在の要素の元の兄弟要素を取得します

④ $ (this) .prevall () ; 取得されたものは、現在の要素の前にあるすべての兄弟要素です

#⑤$(this).siblings(); 取得されたものは、現在の要素のすべての兄弟要素 (それ自体を除く)

ケース演習:

要件分析: マウスがテキストを入力すると、現在のテキストの背景が赤に変わり、クリックすると、現在のテキストの前のテキストの背景色が黄色に変わります。マウスを外側に移動すると、その後ろのテキストの背景色が青に変わります。

効果をキャンセルします。

コードは次のとおりです。 :

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

ログイン後にコピー

注: 上記のコード 49 行目と 50 行目は 1 行に圧縮できるため、新しいメソッド

end() が導入されます。 ; 短いチェーンを復元するために使用されます。

元の 2 行のコード:

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

ログイン後にコピー

修正されたコード:

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

ログイン後にコピー

以上がjQueryで兄弟要素を取得するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

jQueryで兄弟要素を取得するにはどうすればよいですか? (コード例)