jQuery API の closest( selector ) は、マッチした要素からDOMツリーを昇るように辿り、selectorに最初にマッチする祖先要素を、取得するメソッド。
記述方法
jQuery( セレクター１ ) . closest( セレクター２ )
「セレクター１」にマッチする要素から、DOMツリーを昇るように辿り、「セレクター２」に最初にマッチする祖先要素を、取得する。
言い換えると、「セレクター１」にマッチする要素に一番近い、「セレクター２」にマッチする祖先要素を、取得する。
記述例
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>
<!--
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>
<!--
#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>
<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>