3

私は

<div id = "thisdiv" class = "class1 class2 class3class4class5">テキスト</div>

jQueryを使用してclass3以降のすべてのクラスを削除できるようにする必要があります。

何かのようなもの

$('#thisdiv').removeClass(all after class3);

また

$('#thisdiv').attr('class', all from class1 to class3);

どうすればいいですか？

4

7 に答える 7

3

次のことを試すことができますが、クラスがHTMLソースに表示される順序と同じでない場合があります。

$('#thisdiv').attr('class', function(i, v)
{
    var classes = v.split(' '),
        position = $.inArray('class3', classes);

    return classes.slice(0, position + 1).join(' ');
});

これがフィドルです：http：//jsfiddle.net/FNUK2/

より簡潔な方法は、文字列自体をスライスすることです。

$('#thisdiv').attr('class', function(i, v)
{
    return v.substr(0, v.indexOf('class3') + 6);
});

しかし、配列の操作は簡単だと思います。

jQueryチェーンで使用する場合は、最初にjQueryのプロトタイプに追加する必要があります。

$.fn.removeClassesAfter = function(className)
{
    return this.each(function()
    {
        $(this).attr('class', function(i, v)
        {
            var classes = v.split(' '),
                position = $.inArray(className, classes);

            return position == -1 ? v : classes.slice(0, position + 1).join(' ');
        });
    });
};

これがフィドルです：http：//jsfiddle.net/FNUK2/11/

于 2012-07-01T05:45:43.793 に答える
2 
function removeAllClass(selector, after, before) {
    $(selector).attr('class', function(i, oldClass) {
        var arr = oldClass.split(' ');
        if (!before) {
            arr.splice(arr.indexOf(after)+1).join(' ');
            return arr.join(' ');
        } else {
            return arr.slice(arr.indexOf(after), arr.indexOf(before) + 1).join(' ');
        }
    });
}

使用する：

  • すべての後にclass3

    removeAllClass('#thisdiv', 'class3');

    デモ

  • からclass1_class3

    removeAllClass('#thisdiv', 'class1', 'class3');

    デモ

コメントによると

更新： $（'＃thisdiv'）。removeAllClass（'class3'）;で動作させることができるかどうか疑問に思い ます。

$.fn.removeAllClass = function(after, before) {
    $(this).attr('class', function(i, oldClass) {
        var arr = oldClass.split(' ');
        if (!before) {
            arr.splice(arr.indexOf(after) + 1).join(' ');
            return arr.join(' ');
        } else {
            return arr.slice(arr.indexOf(after), arr.indexOf(before) + 1).join(' ');
        }
    });
}

使用する：

  • すべての後にclass3

    $('#thisdiv').removeAllClass('class3');

    デモ

  • からclass1_class3

    $('#thisdiv').removeAllClass('class1', 'class3');

    デモ

于 2012-07-01T06:54:59.057 に答える
1

簡単なデモ http://jsfiddle.net/XaBjX/

動作：後のすべてclass3が削除され、画面に前と後のアラートが表示されます

使用されるAPI：indexOf、、prop。removeClass

お役に立てれば、

コード

var getClass = $("#thisdiv").prop('class');
alert(" Classes before remove ==> " + getClass);

getClass = getClass.substr(getClass.indexOf('class3')+1);

$("#thisdiv").removeClass(getClass.toString());

alert("Classes After remove ==> "+ $("#thisdiv").prop('class'));​
于 2012-07-01T05:54:51.893 に答える
1

これを試して：

var c = $('#thisdiv').prop('class')
$('#thisdiv').prop('class', c.slice(0, c.indexOf('3')+1))

デモ

于 2012-07-01T05:57:59.733 に答える
0

このような「クラス」を処理する組み込みの方法はありません。しかし、文字列を切り刻む方法に不足はないはずです。これがすべてです。

クラスの文字列（getClass()）を取得し、要件を満たすと思われる文字列切り捨て手法を使用して変更してから、。を使用して再度設定し.attr('class', newString)ます。

于 2012-07-01T05:45:38.853 に答える
0

いいえ。クラスが任意の順序になるという実際の保証はありません。

それらが何らかの方法でインデックス付けされている場合は、それらを解析できます...しかし、そうでない場合、これは機能しません。情報を保存しようとしているだけの場合は、HTML5モデルの.data（）関数の使用を検討してください。

于 2012-07-01T05:45:46.487 に答える
0

このようなことを正しく行うには、少し費用がかかる場合があります。class既存のクラスを繰り返し処理し、基準に合わないクラスを削除して、attrを置き換える必要があります。属性からのクラスの順序classは、一般的に、任意の順序であることが保証されていません。

function removeAbove(prefix, max) {
    var regex = new RegExp('^' + prefix + '(\\d+)$');
    return function (v) {
        var match = regex.exec(v);
        if (!match || parseInt(match[1], 10) <= max) {
          return v;
        }
    }
}

function processClasses(keys, fn) {
    var i = keys.length,
        result = [],
        temp;
    while (i--) {
        temp = fn(keys[i]);
        if (temp) {
            result.push(temp);
        }
    }
    return result.join(' ');
}

$('#thisdiv').attr('class', function (idx, cls) {
    return processClasses(cls.split(' '), removeAbove('class', 3));
});
于 2012-07-01T06:07:59.240 に答える