jquery删除多个变量类答案

【问题标题】：jquery remove multiple variable classesjquery删除多个变量类
【发布时间】：2013-06-21 19:42:16
【问题描述】：

我有以下 DOM 元素：

<div id="container">
    <ul class="block-grid three-up">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
    </ul>
</div>

我想要做的是让 ul 有一个类来说明 li 被悬停在上面。到目前为止，我有：

$('#container li').hover(function() {
        i = $(this).index() + 1;
        // need function to remove all classes that start with n- here
        $('#container ul').addClass('n-'+i);
        $(this).addClass('active');
    }, function() {
        // need function to remove all classes that start with n- here
        $(this).removeClass('active');
    }
);

我需要找到一种方法来删除所有以 n- 开头的类，因为现在编写代码，它只是向 ul 添加和添加类。我不能简单地删除所有其他类，因为出于结构原因我需要其他类。而且我知道没有办法在 removeClasses 中使用通配符。我可以在这里使用某种正则表达式吗？

【问题讨论】：

你为什么首先使用n- 类？它们是你的元素吗？您不必使用类对它们进行索引...如果您必须，那么使用 for 循环有什么问题？
您需要重新考虑这一点。为什么要添加带有递增数字的类来开始它，这没有意义。
Remove all classes that begin with a certain string 的可能重复项
@adeneo 这不是一个递增的数字。这只是索引+1，因为我不希望索引从 0 开始。因此，当您将鼠标悬停在第二个元素上时，我希望 ul 具有 n-2 作为类。

标签： jquery

【解决方案1】：

为了回答这个问题，只是为了好玩，这里有一个插件，它可以根据类的开头删除类：

$.fn.removeClassStartsWith = function(param) {
    return this.each(function() {
        var classes = this.className.split(/\s+/g),
            newclasses = [];

        $.each(classes, function(_,klass) {
            if ( $.trim(klass).indexOf(param) !== 0 ) 
               newclasses.push($.trim(klass));
        });

        this.className = newclasses.join(' ');
    });
}

被称为：

$('elements').removeClassStartsWith('n-');

FIDDLE

【讨论】：

【解决方案2】：

没有正则表达式我可以想到的一种方法是将当前类存储在一个变量中，然后将其删除。

var prev;
$('#container li').hover(function () {
    var i = $(this).index() + 1;
        prev = `n-` + i;
    $('#container ul').addClass(prev);
    $(this).addClass('active');
}, function () {
    i = $(this).index() + 1;
    $(this).removeClass('active');
    $('#container ul').removeClass(prev);
});

Check Fiddle

但正如 cmets 所建议的那样，这样做是一种不好的做法

【讨论】：