Question

我有一个

< div id="thisdiv" class="class1 class2 class3 class4 class5"> text < /div>

我需要能够使用jQuery删除class3之后的所有类。

类似

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

OR

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

请问我该怎么做？

Answer 1

您可以尝试以下操作，但您的课程可能与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/

更简洁的方法是just slice the string itself：

$('#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/

Answer 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');

<强> DEMO

从class1到class3

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

<强> DEMO

根据评论

更新：我想知道我是否可以使用它的 $（ '＃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');

<强> DEMO

从class1到class3

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

<强> DEMO

Answer 3

简单演示 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'));

Answer 4

试试这个：

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

Demo

Answer 5

没有内置的处理方式＆＃34;类＆＃34;像这样。但是应该不缺少处理切断字符串的方法，就是这样。

获取类的字符串（getClass()），使用任何字符串截断技术修改它似乎符合您的要求，然后使用.attr('class', newString)再次设置它。

Answer 6

没有。没有真正的保证，这些课程将以任何顺序排列。

如果它们以某种方式被索引，你可以解析它们......但是否则这不会起作用。如果您只是尝试存储信息，请考虑使用HTML5建模的.data（）函数。

Answer 7

正确地做这样的事情可能有点贵。您需要通过迭代现有类并删除那些不符合您标准的类来替换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));
});

在某个课程后删除所有课程

7 个答案:

根据评论