andSelf()

jQuery API の andSelf() は、現在の選択要素と、前選択要素を、共に選択するメソッド。

jQuery Version 1.8」の時点で非推奨になった。
addBack() メソッドで代替できる。

記述例

jQuery( 'div' ) . find( 'p' ) . andSelf();

div要素と、div要素の中のp要素を、共に選択。

実装例(サンプル)

p要素1。

p要素2。

実装例(サンプル)の動作について

「toggle」ボタンをクリックすると、「p要素1」と「p要素2」の背景色を黄色にし、枠線を赤色にする。「p要素1」と「p要素2」の親要素であるdiv要素の枠線も赤色にする。

「toggle」ボタンを再度クリックすると、元に戻す。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-api-sample-button' ) . toggle(
        function() {
            jQuery( '#jquery-api-sample' )
                . find( 'p' )
                . css( 'backgroundColor', 'yellow' )
                . andSelf()
                . css( 'border', '3px solid red' );
        },
        function() {
            jQuery( '#jquery-api-sample' )
                . find( 'p' )
                . css( 'backgroundColor', 'pink' )
                . andSelf()
                . css( 'border', '3px solid gray' );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-api-sample {
    margin: 10px;
    padding: 20px;
    background-color: pink;
    border: 3px solid gray;
    border-radius: 10px;
}
#jquery-api-sample p {
    margin: 10px;
    padding: 20px;
    background-color: pink;
    border: 3px solid gray;
    border-radius: 10px;
    color: #303030;
}
-->
</style>

HTML

<button id="jquery-api-sample-button">toggle</button>
<div id="jquery-api-sample">
    <p>p要素1。</p>
    <p>p要素2。</p>
</div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, その他, トラバース タグ: , パーマリンク