parents( [selector] )

jQuery API の parents( [selector] ) は、マッチした要素の全ての先祖要素を選択するメソッド。selectorを指定した場合、selectorにマッチする先祖要素を選択する。

記述方法

jQuery( セレクター ) . parents();

「セレクター」にマッチする要素の全ての先祖要素を選択。

jQuery( セレクター1 ) . parents( セレクター2 );

「セレクター1」にマッチする要素の先祖要素のうち、「セレクター2」にマッチする先祖要素を選択。

記述例

jQuery( '#sample' ) . parents();

idが「sample」である要素の全ての先祖要素を選択。

jQuery( '#sample' ) . parents( '.sample-parents' );

idが「sample」である要素の先祖要素のクラス名が「sample-parents」であれば選択。

実装例(サンプル)

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

赤色のボックス要素をクリックすると、idが「jquery-sample-」で始まる先祖要素の背景色をピンク色にし、クラス名が「jquery-sample-border」である先祖要素の枠線の色を赤色にする。再度クリックすると、元に戻す。

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-4' ) . toggle(
        function() {
            jQuery( this ) . parents( '[id^="jquery-sample-"]' ) . css( 'backgroundColor', 'pink' );
            jQuery( this ) . parents( '.jquery-sample-border' ) . css( 'border', '1px solid red' );
        },
        function() {
            jQuery( this ) . parents( '[id^="jquery-sample-"]' ) . css( 'backgroundColor', 'yellow' );
            jQuery( this ) . parents( '.jquery-sample-border' ) . css( 'border', '1px solid gray' );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample-1,
#jquery-sample-1 div {
    margin: 23px;
    background-color: yellow;
    border: 1px solid gray;
    border-radius: 10px;
}
#jquery-sample-1 {
    width: 200px;
    height: 200px;
}
#jquery-sample-2 {
    width: 150px;
    height: 150px;
}
#jquery-sample-3 {
    width: 100px;
    height: 100px;
}
#jquery-sample-4 {
    width: 50px;
    height: 50px;
    background-color: red !important;
    border: 1px solid darkred !important;
    cursor: pointer;
}
-->
</style>

HTML

<div id="jquery-sample-1">
    <div id="jquery-sample-2" class="jquery-sample-border">
        <div id="jquery-sample-3">
            <div id="jquery-sample-4"></div>
        </div>
    </div>
</div>

スポンサード リンク

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