prevUntil( [selector][, filter] )

jQuery API の prevUntil( [selector][, filter] ) は、マッチした要素の兄要素のうち、selectorにマッチする要素がある直前までを選択するメソッド。filterで、選択を、さらに絞り込むことができる。

引数

selector

オプション。

セレクター。

このセレクターに指定した要素の直前までを選択する。

filter

オプション。

セレクター。

選択を絞り込むことができる。

記述方法

jQuery( セレクター1 ) . prevUntil( セレクター2, セレクター3 );

「セレクター1」にマッチした要素の兄要素のうち、「セレクター2」にマッチする要素がある直前までの要素で、さらに、「セレクター3」にマッチする要素を選択する。

記述例

jQuery( '#smaple-1' ) . prevUntil( '.smaple-2', '.smaple-3' );

idが「smaple-1」である要素の兄要素のうち、クラス名が「smaple-2」である要素がある直前までの要素で、さらに、クラス名が「smaple-3」である要素を選択。

実装例(サンプル)

用語1

用語1の説明文1

用語1の説明文2

用語1の説明文3

…[表示]

用語2

用語2の説明文1

用語2の説明文2

用語2の説明文3

…[表示]

用語3

用語3の説明文1

用語3の説明文2

用語3の説明文3

…[表示]

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

「…[表示]」をクリックすると、「用語1の説明文2」「用語1の説明文3」をスライドダウンのアニメーション動作で出現させる。さらに、「…[表示]」を「[非表示]」に変える。

「[非表示]」をクリックすると、「用語1の説明文2」「用語1の説明文3」をスライドアップのアニメーション動作で非表示にする。さらに、「[非表示]」を「…[表示]」に変える。

「用語2」「用語3」についても同様。

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '.jquery-sample-open' ) . toggle(
        function () {
            jQuery( this )
                . prevUntil( 'dt', '.jquery-sample' )
                . slideDown( 1000 );
            jQuery( this ) . html( '<p>[非表示]</p>' );
        },
        function () {
            jQuery( this )
                . prevUntil( 'dt', '.jquery-sample' )
                . slideUp( 1000 );
            jQuery( this ) . html( '<p>...[表示]</p>' );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample dd.jquery-sample {
    display: none;
}
.jquery-sample-open {
    color: blue;
    cursor: pointer;
}
-->
</style>

HTML

<dl id="jquery-sample">
    <dt>用語1</dt>
        <dd><p>用語1の説明文1</p></dd>
        <dd class="jquery-sample"><p>用語1の説明文2</p></dd>
        <dd class="jquery-sample"><p>用語1の説明文3</p></dd>
        <dd class="jquery-sample-open"><p>...[表示]</p></dd>
    <dt>用語2</dt>
        <dd><p>用語2の説明文1</p></dd>
        <dd class="jquery-sample"><p>用語2の説明文2</p></dd>
        <dd class="jquery-sample"><p>用語2の説明文3</p></dd>
        <dd class="jquery-sample-open"><p>...[表示]</p></dd>
    <dt>用語3</dt>
        <dd><p>用語3の説明文1</p></dd>
        <dd class="jquery-sample"><p>用語3の説明文2</p></dd>
        <dd class="jquery-sample"><p>用語3の説明文3</p></dd>
        <dd class="jquery-sample-open"><p>...[表示]</p></dd>
</dl>

スポンサード リンク

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