タグ別アーカイブ: andSelf

直前の選択オブジェクトと現在の選択オブジェクト


直前の選択オブジェクトと現在の選択オブジェクト(訂正版)に訂正版を掲載しました。
andSelf は Ver.1.8 以降は非推奨とのことです。
今後は addBack をご使用ください。

Object の階層が深いと何時も苦労していたんですが、今までの苦労が嘘のようです。

親子階層のObject に対して 親階層を変更して 子階層の一部のみ find で検索して
其々に同じ変更を行うと云った処理です。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                $('#exec_o_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').css({'background-color' : '#ff0000'});
                });
                $('#exec_e_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').css({'background-color' : '#00ff00'});
                });

                $('#exec_odd').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').andSelf().css({'background-color' : '#ff0000'});
                });
                $('#exec_even').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').andSelf().css({'background-color' : '#00ff00'});
                });

                $('#exec_class-a').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.a').andSelf().css({'background-color' : '#0000ff'});
                });
                $('#exec_class-b').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.b').andSelf().css({'background-color' : '#ff00ff'});
                });
                $('#exec_class-c').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.c').andSelf().css({'background-color' : '#ffff00'});
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

            button {
                margin           : 5px;
            }

            div.disp_area {
                width            : 500px;
                border           : solid 1px #000000;
            }

            div.target_div {
                width            : 50%;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exec_o_only">click me! change odd only</button>
                <button id="exec_e_only">click me! change even only</button>
                <br />
                <button id="exec_odd">click me! change odd add parent</button>
                <button id="exec_even">click me! change even add parent</button>
            </div>
            <div id="disp_area" class="disp_area">
                <div class='target_div odd '>Target Div  1</div>
                <div class='target_div even'>Target Div  2</div>
                <div class='target_div odd '>Target Div  3</div>
                <div class='target_div even'>Target Div  4</div>
                <div class='target_div odd '>Target Div  5</div>
                <div class='target_div even'>Target Div  6</div>
                <div class='target_div odd '>Target Div  7</div>
                <div class='target_div even'>Target Div  8</div>
                <div class='target_div odd '>Target Div  9</div>
                <div class='target_div even'>Target Div 10</div>
            </div>

            <div id="button_area2">
                <button id="exec_class-a">click me! change class-a</button>
                <button id="exec_class-b">click me! change class-b</button>
                <button id="exec_class-c">click me! change class-c</button>
            </div>
            <div id="disp_area2" class="disp_area">
                <div class='target_div a'>Target Div  1</div>
                <div class='target_div b'>Target Div  2</div>
                <div class='target_div c'>Target Div  3</div>
                <div class='target_div b'>Target Div  4</div>
                <div class='target_div a'>Target Div  5</div>
                <div class='target_div b'>Target Div  6</div>
                <div class='target_div a'>Target Div  7</div>
                <div class='target_div a'>Target Div  8</div>
                <div class='target_div c'>Target Div  9</div>
                <div class='target_div b'>Target Div 10</div>
            </div>

        </div>
    </body>
</html>

sample

sample の其々の button を click すると親階層と指定した子階層のに対しての
背景色を変更してみました。

実際には業務で使用してみないと正直わかりませんが、私としては非常に便利です。

今までは其々に行う変更内容を親子で別けて其々に指定していました。
そのせいで修正の際にどちらかのみを修正してお客様に怒られる・・・

皆さんはそんな経験は無いでしょうか。
今後は極力使っていきたいと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。