jQuery API の prevUntil( [selector] ) は、マッチした要素の兄要素のうち、selectorにマッチする要素がある直前までを選択するメソッド。
引数
- selector
オプション。
セレクター。
このセレクターに指定した要素の直前までを選択する。
記述方法
jQuery( セレクター１ ) . prevUntil( セレクター２ );
「セレクター１」にマッチした要素の兄要素のうち、「セレクター２」にマッチする要素がある直前までを選択。
記述例
jQuery( '#smaple-1' ) . prevUntil( '.smaple-2' );
idが「smaple-1」である要素の兄要素のうち、クラス名が「smaple-2」である要素がある直前までを選択。
実装例（サンプル）
- 用語１
用語１の説明文１
用語１の説明文２
用語１の説明文３
…[表示]
- 用語２
用語２の説明文１
用語２の説明文２
用語２の説明文３
…[表示]
- 用語３
用語３の説明文１
用語３の説明文２
用語３の説明文３
…[表示]
実装例（サンプル）の動作について
「…[表示]」をクリックすると、「用語１の説明文１」「用語１の説明文２」「用語１の説明文３」をスライドダウンのアニメーション動作で出現させる。さらに、「…[表示]」を「[非表示]」に変える。
「[非表示]」をクリックすると、「用語１の説明文１」「用語１の説明文２」「用語１の説明文３」をスライドアップのアニメーション動作で非表示にする。さらに、「[非表示]」を「…[表示]」に変える。
「用語２」「用語３」についても同様。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '.jquery-sample-open' ) . toggle(
function () {
jQuery( this )
. prevUntil( 'dt' )
. slideDown( 1000 );
jQuery( this ) . html( '<p>[非表示]</p>' );
},
function () {
jQuery( this )
. prevUntil( 'dt' )
. slideUp( 1000 );
jQuery( this ) . html( '<p>...[表示]</p>' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-sample-open' ) . toggle(
function () {
jQuery( this )
. prevUntil( 'dt' )
. slideDown( 1000 );
jQuery( this ) . html( '<p>[非表示]</p>' );
},
function () {
jQuery( this )
. prevUntil( 'dt' )
. slideUp( 1000 );
jQuery( this ) . html( '<p>...[表示]</p>' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample dd {
display: none;
}
#jquery-sample dd.jquery-sample-open {
display: block;
}
.jquery-sample-open {
color: blue;
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample dd {
display: none;
}
#jquery-sample dd.jquery-sample-open {
display: block;
}
.jquery-sample-open {
color: blue;
cursor: pointer;
}
-->
</style>
HTML
<dl id="jquery-sample">
<dt>用語１</dt>
<dd><p>用語１の説明文１</p></dd>
<dd><p>用語１の説明文２</p></dd>
<dd><p>用語１の説明文３</p></dd>
<dd class="jquery-sample-open"><p>...[表示]</p></dd>
<dt>用語２</dt>
<dd><p>用語２の説明文１</p></dd>
<dd><p>用語２の説明文２</p></dd>
<dd><p>用語２の説明文３</p></dd>
<dd class="jquery-sample-open"><p>...[表示]</p></dd>
<dt>用語３</dt>
<dd><p>用語３の説明文１</p></dd>
<dd><p>用語３の説明文２</p></dd>
<dd><p>用語３の説明文３</p></dd>
<dd class="jquery-sample-open"><p>...[表示]</p></dd>
</dl>
<dt>用語１</dt>
<dd><p>用語１の説明文１</p></dd>
<dd><p>用語１の説明文２</p></dd>
<dd><p>用語１の説明文３</p></dd>
<dd class="jquery-sample-open"><p>...[表示]</p></dd>
<dt>用語２</dt>
<dd><p>用語２の説明文１</p></dd>
<dd><p>用語２の説明文２</p></dd>
<dd><p>用語２の説明文３</p></dd>
<dd class="jquery-sample-open"><p>...[表示]</p></dd>
<dt>用語３</dt>
<dd><p>用語３の説明文１</p></dd>
<dd><p>用語３の説明文２</p></dd>
<dd><p>用語３の説明文３</p></dd>
<dd class="jquery-sample-open"><p>...[表示]</p></dd>
</dl>