jQuery API の parentsUntil( [selector][, filter] ) は、マッチした要素の先祖要素のうち、selectorにマッチする先祖要素の直前までの先祖要素を選択するメソッド。filterを指定した場合、filterにマッチする先祖要素だけに、選択を絞り込む。
記述方法
jQuery( セレクター１ ) . parentsUntil( セレクター２ );
「セレクター１」にマッチする要素の先祖要素のうち、「セレクター２」にマッチする先祖要素の直前までの先祖要素を選択。
jQuery( セレクター１ ) . parentsUntil( セレクター２, フィルター );
「セレクター１」にマッチする要素の先祖要素のうち、「セレクター２」にマッチする先祖要素の直前までの先祖要素で、「フィルター」にマッチする先祖要素を選択。
記述例
jQuery( '#sample-1' ) . parentsUntil( '#sample-2' );
idが「sample-1」である要素の先祖要素のうち、idが「sample-2」である先祖要素の直前までの先祖要素を選択。
jQuery( '#sample-1' ) . parentsUntil( '#sample-2', '.sample-3' );
idが「sample-1」である要素の先祖要素のうち、idが「sample-2」である先祖要素の直前までの先祖要素で、クラス名が「sample-3」である先祖要素を選択。
実装例（サンプル）
実装例（サンプル）の動作について
赤色のボックス要素をクリックすると、idが「jquery-sample」である先祖要素の直前までの先祖要素の背景色をピンク色にする。
背景色をピンク色にした先祖要素のうち、クラス名が「jquery-sample-border」である先祖要素の枠線の色を赤色にする。
赤色のボックス要素を、再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-4' ) . toggle(
function() {
jQuery( this ) . parentsUntil( '#jquery-sample' ) . css( 'backgroundColor', 'pink' );
jQuery( this ) . parentsUntil( '#jquery-sample', '.jquery-sample-border' ) . css( 'border', '1px solid red' );
},
function() {
jQuery( this ) . parentsUntil( '#jquery-sample' ) . css( 'backgroundColor', 'yellow' );
jQuery( this ) . parentsUntil( '#jquery-sample', '.jquery-sample-border' ) . css( 'border', '1px solid gray' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-4' ) . toggle(
function() {
jQuery( this ) . parentsUntil( '#jquery-sample' ) . css( 'backgroundColor', 'pink' );
jQuery( this ) . parentsUntil( '#jquery-sample', '.jquery-sample-border' ) . css( 'border', '1px solid red' );
},
function() {
jQuery( this ) . parentsUntil( '#jquery-sample' ) . css( 'backgroundColor', 'yellow' );
jQuery( this ) . parentsUntil( '#jquery-sample', '.jquery-sample-border' ) . css( 'border', '1px solid gray' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample 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>
<!--
#jquery-sample 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">
<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>
</div>
<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>
</div>