3

我有一个

<div id="thisdiv" class="class1 class2 class3 class4 class5">文本</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

正确地做这样的事情可能有点贵。您需要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 回答
0

没有像这样处理“类”的内置方法。但是应该不乏处理切断字符串的方法，这就是全部。

获取类字符串 ( getClass())，使用似乎满足您要求的任何字符串截断技术对其进行修改，然后使用.attr('class', newString).

于 2012-07-01T05:45:38.853 回答
0

不，不能真正保证课程会按任何顺序排列。

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

于 2012-07-01T05:45:46.487 回答