jquery endメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery end()メソッド

endメソッドは、一つ前の処理に指定されているセレクタと処理をキャンセルして2つ前に指定されている要素を指定します
使い方はcss()などの後ろに.end()をつけます
メリットは前に指定したセレクタを使いまわせることです。セレクタで指定しないため要素を探しに行かなくてすむので処理スピードが高速になります

.end()

一つ前の処理に指定されている処理を元の状態にもどして2つ前に指定されている要素を指定します

ボタンをクリックしたときに2つ前の要素に対して枠線を変えます

jquery

$(function() {
    $("button").toggle(
        function() {
            $("#hoge")
                .find("p").css( "backgroundColor","yellow" )
                .end()
                .css( "border","3px solid red" );
        },
        function() {
            $("#hoge")
                .find("p").css( "backgroundColor","bisque" )
                .end()
                .css( "border","3px solid blue" );
        });
});
css
#hoge{
    padding: 20px;
    border: 3px solid blue;
     }
#hoge p{
    padding: 20px;
    background-color: bisque;
    border: 3px solid blue;
     }

html

<button>ボタン</button>
<div id="hoge">親要素
<p>子要素 p要素</p>
</div>

サンプル

親要素

子要素 p要素









(C)2012 ホームページ作成無料