Question

当我有一串像这样的类时，我试图找到一种方法：last_class;=next_class;^=mce;*=tiny;~=wysiwyg。每个班级用分号分隔的地方。它可以包含一个像=，^ =，* =或〜=的选择器。我的第一个想法是使用选择器来定位包含这些类的元素，因为我希望不能直接在$ .removeClass（）中使用这些选择器。但我需要解决的问题是如何引用选择器找到的结果（我的意思是像* =，〜=，^ =这样的运算符）。当我找到标签时，我需要获取我需要删除的类的名称。怎么做？我知道我可以使用.removeClass（函数）语法，但我不知道在函数内写什么。

到目前为止我尝试了什么：

var selectors = "last_class;=next_class;^=mce;*=tiny;~wysiwyg"
selectors.split(';');
for ( var i = 0; i<selectors.length; i++ )
  {
      if ( selectors[i][1] == "=") // ..mce.., ..tiny.. , ..wysiwyg..
        {
        switch ( selectors[i][0])
          {
          case "^": // starts with
            var selector = 'class^="' + selectors[i].substring(2, 0) + '", '
          break;
          case "*": // contains
            var selector = 'class*="' + selectors[i].substring(2, 0) + '", '
          break;
          case "~": // contains word
            var selector = 'class~="' + selectors[i].substring(2, 0) + '", '
          break;
          }

        }
      else // last_class or next_class
        {
        var selector;
        if ( selectors[i][0] == "=") // next_class
          selector = selectors[i].substring(1, 0);
        selector = '."' + selectors[i].substring(1, 0) + '", '
        $.removeClass(selector);
        }
 }

最终目标是删除列表中的所有类。

编辑：这是我的第二次尝试。没有完成，但是此时我无法找到为什么当我返回class_name时，该类没有从元素中删除。我调试了它，发现类名是正确的。

var selectors = "^=col;~=cl;*=-art-"["remove_classes"].split(';');
for ( var i = 0; i<selectors.length; i++ )
  {
  if ( selectors[i][1] == "=")
    {
    var search = selectors[i].substring(2, selectors[i].length );
    switch ( selectors[i][0])
      {
      case "^": // starts with
        var selector = '[class^="' + search + '"]'
        var regex = new RegExp( "^" + search + ".*", 'i');
        $(selector).removeClass(
          function(){
          for ( var word in this.className.split(" ") )
            {
            var class_name = this.className.match(regex);
            if (class_name)
              return class_name;
            }
          }
        )
      break;
      case "*": // contains
        var selector = '[class*="' + search + '"]'
      break;
      case "~": // contains word
        var selector = '[class~="' + search + '"]'
      break;
      }

    }
  else
    {
    var selector;
    if ( selectors[i][0] == "=")
      selector = selectors[i].substring(1, 0);
    selector = '."' + selectors[i].substring(1, 0) + '", '
    $.removeClass(selector);
    }
  }

Answer 1

这不是那么简单。当您^=mce时，您会想要同时使用以下两个元素：

<div class="mce_edit other_class"></div>
<div class="other_class mce_edit"></div>

如果您将该选择器翻译为[class^=mce]并执行$('[class^=mce]')，那么您只会匹配第一个元素。实际上，获取它们的选择器应该是（空间用于第二部分）：

$('[class^=mce],[class*= mce]')

出于同样的原因，~=比较器不是特别的，并且对应于.classname选择器。

这是一个解决方案，既可以找到元素，又可以从找到的需要删除的元素中获取类名：

var selectors = 'last_class;=next_class;^=mce;*=tiny;~=wysiwyg';
selectors = selectors.replace(/;/g, '\n'); // to use convenient `m` modifier

var classExtractor = new RegExp(selectors
    .replace(/^(\~?=)?([\w-].*)/gm, ' $2(?![^ ])')
    .replace(/^\*=(.*)/gm, '[^ ]*$1[^ ]*')
    .replace(/^\^=(.*)/gm, ' $1[^ ]*')
    .replace(/^\$=(.*)/gm, '[^ ]*$1(?![^ ])')
    .replace(/\n/g, '|'), 'g');

var selectors = selectors
    .replace(/^(\~?=)?([\w-].*)/gm, '.$2')
    .replace(/^\*=(.*)/gm, '[class*=$1]')
    .replace(/^\^=(.*)/gm, '[class*= $1],[class^=$1]')
    .replace(/^\$=(.*)/gm, '[class*=$1 ],[class$=$1]')
    .replace(/\n/g, ',');

$(selectors).each(function (i, elem) {
    (' ' + this.className).match(classExtractor).forEach(function (match) {
        $(elem).removeClass(match);
    });
});

我遗漏了不那么受欢迎的|= CSS比较器，但如果你也需要那个，那么添加必要的代码应该不会太难。

关于您的代码的备注

我没有详细查看您的代码，但这里有一些关于.removeClass()失败原因的提示：

首先，如果您要记录（使用console.log()）传递给.removeClass()的最终值，它会帮助您进行调试。它肯定有助于发现失败的一些原因;
.match(regex)返回一个数组，这样就解释了^=案例在第二个代码版本中失败的原因。您必须return className[0];。可能还有其他问题，我没有进一步测试;
您已经构建了一些选择器，例如'class*="' + search + '"'，它们应该放在方括号中，例如：'[class*="' + search + '"]'。

Answer 2

似乎没有直接的方法。就模式处理事物而言，你正朝着正确的方向前进。这是一个伪代码（尽可能避免RegEx使事情变得容易）：

// Create an array of class names.
var classes = $el.attr('class').split(/[\s]+/);

// Create an array of patterns.
var patterns = patterns.split(';');

// Go pattern by pattern!
for (var i in patterns) {

  var pattern = patterns[i];

  // Iterate over classes array
  for (var j in classes) {

    // If classes[j] matches your pattern, remove it from the classes array.
    var match = false;

    // Check pattern 1
    if (0 === pattern.indexOf('^=')) {
    }
    // Check pattern 2
    else if (0 === pattern.indexOf('*=')) {
    }
    // Check default case (if required)
    else {
      // Check for a match
    }

    // If a match is found, remove the element from the classes array.
    // Note: This is not as easy as delete classes[j] (:
    if (match) {

    }

  }

}

// Convert classes back to a string and assign it to the element.
$el.attr('class', classes.join(' '));

我希望它有所帮助。棘手的部分是匹配模式。第二个棘手的部分是从类数组中删除项目。

如何在JQuery removeClass（函数）中获取类的名称？

2 个答案:

关于您的代码的备注