removeClass( function( [index][, oldValue] ) )

jQuery API の removeClass( function( [index][, oldValue] ) ) は、削除するクラス名を関数で設定するメソッド。インデックス番号とクラス属性の現在の値を、関数に引き渡すことができる。1つ目の引数が、インデックス番号。2つ目の引数が、クラス属性の現在の値。

記述方法

jQuery( セレクター ) . removeClass( function( インデックス番号, クラス属性の現在の値 ) {
    return クラス属性から削除するクラス名;
} );

「セレクター」に指定した要素のクラス属性から削除するクラス名を、function関数で設定する。その際、「セレクター」に指定した要素の、「インデックス番号」と、「クラス属性の現在の値」を、function関数に引き渡すことができる。

実装例(サンプル)

  • 項目1
  • 項目2
  • 項目3

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

「クラス名を追加/削除」ボタンをクリックすると、「項目1」を赤色に、「項目2」を青色に、「項目3」を緑色にする。

「クラス名を追加/削除」ボタンを再度クリックすると、すべての項目を灰色に戻す。

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( '#jquery-sample-ul li' ) . addClass( function( index, oldValue ) {
                return oldValue + '-' + index;
            } );
        },
        function() {
            jQuery( '#jquery-sample-ul li' ) . removeClass( function( index, oldValue ) {
                return 'jquery-sample-li-' + index;
            } );
        }
    );
} );
// -->
</script>

CSS

<style>
<!--
.jquery-sample-li {
    color: gray;
}
.jquery-sample-li-0 {
    color: red;
}
.jquery-sample-li-1 {
    color: blue;
}
.jquery-sample-li-2 {
    color: green;
}
-->
</style>

HTML

<p>
    <button id="jquery-sample-button">クラス名を追加/削除</button>
</p>
<ul id="jquery-sample-ul">
    <li class="jquery-sample-li">項目1</li>
    <li class="jquery-sample-li">項目2</li>
    <li class="jquery-sample-li">項目3</li>
</ul>

スポンサード リンク

カテゴリー: API, CSS, DOM操作, JavaScript, jQuery, クラス属性, 属性 タグ: パーマリンク