Jquery 删除包含一组字符的类

是否有方法删除启动或包含已定义文本字符串的类

我有几个从.bg开始的背景色覆盖类

我已经为一个选择框设置了一个小jquery，它向元素添加和删除修改类，在本例中是一个标记 我需要删除这些以.bg开头的类，同时保留另一个决定按钮大小的类 比如说：

    $("#buttoncolors").change(function() // buttoncolors is the select id
    {
        var valcolor = $("#buttoncolors").val();
        $("#buttontostyle").removeClass("bg" + "*");
        $("#buttontostyle").addClass(valcolor);

    });

试试这个-

$('#buttontostyle:not([class^="bg"])');

---

在保持其他类不变的情况下，这应该可以做到这一点：

var matches = $('#buttontostyle').attr('class').match(/\bbg\S+/g);
$.each(matches, function(){
    var className = this;
    $('#buttontostyle').removeClass(className.toString());
});

试试这个

 $("#buttontostyle").removeClass('[class^="bg"]');

---

可以向removeClass传递一个函数，该函数返回要删除的类的列表。在这个函数中，您可以测试每个类名是否以bg开头，如果以bg开头，则将其添加到要删除的类列表中

$("#buttoncolors").on("change", function () {
  var valcolor = $("#buttoncolors").val();

  $("#buttonstyle").removeClass(function (index, classNames) {
    var current_classes = classNames.split(" "), // change the list into an array
        classes_to_remove = []; // array of classes which are to be removed

    $.each(current_classes, function (index, class_name) {
      // if the classname begins with bg add it to the classes_to_remove array
      if (/bg.*/.test(class_name)) {
        classes_to_remove.push(class_name);
      }
    });
    // turn the array back into a string
    return classes_to_remove.join(" ");
  });

  $("#buttonstyle").addClass(valcolor);
});

演示：

奖金

您可以通过为回调使用命名函数而不是匿名函数来整理代码，以便可以多次使用它

// name the function 
function removeColorClasses (index, classNames) {
  var current_classes = classNames.split(" "), // change the list into an array
      classes_to_remove = []; // array of classes which are to be removed

  $.each(current_classes, function (index, class_name) {
    // if the classname begins with bg add it to the classes_to_remove array
    if (/bg.*/.test(class_name)) {
      classes_to_remove.push(class_name);
    }
  });
  // turn the array back into a string
  return classes_to_remove.join(" ");
}

然后，您可以在通常编写函数{…}的地方输入函数名，反复使用该函数

这个怎么样

//remove类正则表达式函数 $.fn.removeClassRegEx=functionregex{ var classes=$this.attr'class'； if！classes | |！regex返回false； var classArray=[]； 类=类。拆分“”； 对于变量i=0，len=classes.length；i允许更大的灵活性，用户只需为要删除的每个类返回true：

$.fn.removeClassBy = function (fun) {
  if (!fun) return
  $(this).removeClass(function (index, classNames) {
    const currentClasses = classNames.split(' '); // change the list into an array
    let classesToRemove = []; // array of classes which are to be removed

    $.each(currentClasses, function (index, className) {
      // if the classname begins with bg add it to the classes_to_remove array
      if (fun(className)) {
        classesToRemove.push(className);
      }
    });
    // turn the array back into a string
    return classesToRemove.join(' ');
  })
}

用法：

$('[class*="some-partial-class-name"]').removeClassBy(className => className.includes('some-partial-class-name'));

---

使用reg exp确定以pattern开头的类名，并使用remove from jqueryduplicate将其删除。但我猜这是因为您已经回答了在没有特定类的情况下如何选择两个对象，问题是如何删除以特定字符串开头的一组类。

$.fn.removeClassBy = function (fun) {
  if (!fun) return
  $(this).removeClass(function (index, classNames) {
    const currentClasses = classNames.split(' '); // change the list into an array
    let classesToRemove = []; // array of classes which are to be removed

    $.each(currentClasses, function (index, className) {
      // if the classname begins with bg add it to the classes_to_remove array
      if (fun(className)) {
        classesToRemove.push(className);
      }
    });
    // turn the array back into a string
    return classesToRemove.join(' ');
  })
}

$('[class*="some-partial-class-name"]').removeClassBy(className => className.includes('some-partial-class-name'));