Question

我有以下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中没有办法使用通配符。我可以在这里使用某种正则表达式吗？

Answer 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

Answer 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

但正如评论所建议的那样，这样做是不好的做法

jquery删除多个变量类

2 个答案: