closest( selector )

jQuery API の closest( selector ) は、マッチした要素からDOMツリーを昇るように辿り、selectorに最初にマッチする祖先要素を、取得するメソッド。

記述方法

jQuery( セレクター1 ) . closest( セレクター2 )

「セレクター1」にマッチする要素から、DOMツリーを昇るように辿り、「セレクター2」に最初にマッチする祖先要素を、取得する。

言い換えると、「セレクター1」にマッチする要素に一番近い、「セレクター2」にマッチする祖先要素を、取得する。

記述例

jQuery( '#sample' ) . closest( '.sample-ancestor' )

idが「sample」である要素に一番近い、クラス名が「sample-ancestor」である祖先要素を、取得する。

実装例(サンプル)

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

「チェックボックス」もしくは「ラジオボタン」にチェックを入れると、背景色がピンク色になる。

チェックを外すと、背景色が黄色になる。

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-smaple-form input[name^=jquery-smaple-]' ) . change(
        function () {
            jQuery( '#jquery-smaple-form input' ) . closest( 'label' ) . css( {
                backgroundColor: 'yellow',
            } );
            jQuery( '#jquery-smaple-form :checked' ) . closest( 'label' ) . css( {
                backgroundColor: 'pink',
            } );
        }
    ) . change();
} );
// -->
</script>

CSS

<style>
<!--
#jquery-smaple-form {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
    border-radius: 10px;
}
#jquery-smaple-form input {
    margin: 5px 5px 15px 5px;
}
#jquery-smaple-form label {
    margin: 5px;
    background-color: yellow;
    font-size: 15px;
    color: #303030;
}
-->
</style>

HTML

<form id="jquery-smaple-form">
    <p>
        <label>
            <input type="checkbox" name="jquery-smaple-checkbox" checked="checked" />
            チェックボックス1
        </label>
        <label>
            <input type="checkbox" name="jquery-smaple-checkbox" />
            チェックボックス2
        </label>
        <label>
            <input type="checkbox" name="jquery-smaple-checkbox" />
            チェックボックス3
        </label>
    </p>
    <p>
        <label>
            <input type="radio" name="jquery-smaple-radio" checked="checked" />
            ラジオボタン1
        </label>
        <label>
            <input type="radio" name="jquery-smaple-radio" />
            ラジオボタン2
        </label>
        <label>
            <input type="radio" name="jquery-smaple-radio" />
            ラジオボタン3
        </label>
    </p>
</form>

スポンサード リンク

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