如何在JQuery removeClass(函数)中获取类的名称?
当我有一系列这样的类时,我试图找到一种方法来实现它:如何在JQuery removeClass(函数)中获取类的名称?,jquery,Jquery,当我有一系列这样的类时,我试图找到一种方法来实现它:last\u class=下一节课^=mce*=微小的~=所见即所得。每个类都用分号分隔。它可以包含一个选择器,如=、^=、*=或~=。我的第一个想法是使用选择器来定位包含这些类的元素,因为我认为在$.removeClass()中不可能直接使用这些选择器。但是我需要解决的问题是如何引用选择器找到的结果(我指的是像*=,~=,^=)这样的操作符)。当我找到标记时,我需要获取我需要删除的类的名称。怎么做?我知道我可以使用.removeClass(函
last\u class=下一节课^=mce*=微小的~=所见即所得
。每个类都用分号分隔。它可以包含一个选择器,如=、^=、*=或~=。我的第一个想法是使用选择器来定位包含这些类的元素,因为我认为在$.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);
}
}
var selectors=“last_class;=next_class;^=mce;*=tiny;~wysiwyg”
选择器。拆分(“;”);
对于(var i=0;i似乎没有直接的方法。就逐个模式处理问题而言,您的方向是正确的。下面是一个伪代码(尽可能避免使用正则表达式以使事情更简单):
我希望这会有帮助。棘手的部分是匹配模式。第二个棘手的部分是从类数组中删除项。这并不是那么简单。当您有^=mce
时,您将需要同时删除以下两个元素:
<div class="mce_edit other_class"></div>
<div class="other_class mce_edit"></div>
出于同样的原因,~=
比较器没有那么特殊,它对应于.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)
返回一个数组,这就解释了为什么^=
案例在第二个代码版本中失败。您必须返回className[0];
。不过可能还有其他问题,我没有进一步测试它
- 您已经构建了一些选择器,如
'class*=“'+search+'”
,这些选择器实际上应该放在方括号中,如:'[class*=“'+search+']”
我几乎完成了。我更新了问题并添加了代码。但是问题是,当我找到类名(我在调试器中签入了类名)时所以类名没有被删除。我知道这一点,因为如果要删除它,那么当我再次调用该函数时,就不可能输入相同的断点…如果您已设法匹配类名,那么问题应该得到解决。之后我不理解问题。试着使用console.log()确保按预期删除类名(可能在匹配过程中由于一些小错误丢失了一两个字符)。非常感谢。你得到了我的尊重,因为这段代码非常专业和高水平。它工作得非常好。无论如何,我不知道为什么我在问题中显示的第二段代码不适用于仅使用一个运算符的单个类名。^=。我很想知道。即使我匹配了类名,我也无法删除该类_从匿名函数返回后的名称。不客气。我在回答的末尾添加了一些关于您的代码的注释。希望能有所帮助。好的,正如trincot所说的那样更正上述代码:return class_name
必须更正为return class_name[0];
<div class="mce_edit other_class"></div>
<div class="other_class mce_edit"></div>
$('[class^=mce],[class*= mce]')
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);
});
});