jQuery 获取某些类但不获取其他类答案

【问题标题】：jQuery get certain classes but not othersjQuery 获取某些类但不获取其他类
【发布时间】：2011-10-18 19:20:54
【问题描述】：

我有一个看起来像

的 div

<div class="draggable resizable abc table shadow"></div>

类没有特定的顺序。如果我这样做$('div').attr('class')，那么我会得到该 div 的所有类的列表。我想要的是只获取不是resizable、draggable或table的类。在这种情况下，我想要abc shadow。我该怎么做。

【问题讨论】：

所以你想要实际的类名，而不是 HTML 元素？
提示：如果您解释您想要做什么而不是（或除此之外）询问您认为可以实现它的一种方式，您会得到更好的答案。为什么你想要一个类列表减去其他类？（你打算怎么处理它们。）

标签： javascript jquery class attr

【解决方案1】：

var all  = "draggable resizable abc table shadow";
var some = all.replace(/(?:^|\s)(resizable|draggable|table)(?=\s|$)/g, '');

console.log(some);
// " abc shadow"

console.log(some.replace(/^\s+|\s+$/g,''));
// "abc shadow"

console.log(some.split(/\s+/));
// ["", "abc", "shadow"]

请注意，如果您只需要一个适合将 className 设置为的字符串，则不需要第二个 replace（您不需要去除前导和尾随空格）。

但是，如果您只是想从一个元素中删除一组已知类，那么简单得多：

$(...).removeClass("draggable resizable table");

替代（不需要正则表达式）：

var ignore = {resizable:1, draggable:1, table:1};
var all = "draggable resizable abc table shadow".split(' ');
for (var subset=[],i=all.length;i--;) if (!ignore[all[i]]) subset.push(all[i]);

console.log(subset);
// ["shadow","abc"]

console.log(subset.join(' '));
// "shadow abc"

【讨论】：

谢谢，但我在每节课前都加逗号,abc,shadow 我想在每节课后留一个空格，所以看起来像abc shadow
@Pinkie：some.split(/\s+/) 返回一个数组。你可以用任何你想要的方式连接它的元素。
离开拆分会给你一个空格分隔的字符串，适合将类设置为（如果这是你想要做的）。

【解决方案2】：

一个插件：

(function($) {
    $.fn.getClasses = function(exclude) {
        var remove = {};

        for(var i = exclude.length; i--;) {
            remove[exclude[i]] = true;
        }

        return $.map(this.attr('class').split(/\s+/g), function(cls) {
            return remove[cls] ? null : cls;
        });
    };
}(jQuery));

用法：

var classes = $('div').getClasses(['resizable', 'draggable', 'table']);

【讨论】：

不错。 +1 向我展示 $.map 和 null 自动压缩结果。（我个人可能会将方法重命名为 getClassesWithout，但这比其他任何东西都更受欢迎。）
@Josh：不知道你为什么这样做，但它并没有改变任何东西，事实上 JSLint 更喜欢另一种方式。
@FelixKling 我的错，你是对的，乍一看我以为是错字！
@DaveMackintosh：你不明白这个问题。 OP 想要一个类列表，而不是元素列表。
@Pinkie：你的小提琴最后一行有错误：);) 应该是));。 jsfiddle.net/rkyqK/2

【解决方案3】：

@Phrogz 的回答很好。显然，他是一个正则表达式奇才。由于我不太了解正则表达式，所以这是我的看法：

var aryClasses = $("div").attr("class").split(" ");
var aryDesiredClasses = new Array();

for(var i = 0; i < aryClasses.length; i++) {
    if(aryClasses[i] != "table" 
                     && aryClasses[i] != "resizable" 
                     && aryClasses[i] != "draggable")
        aryDesiredClasses.push(aryClasses[i]);
}

alert(aryDesiredClasses.join(" "));

这里是a working fiddle to illustrate。

【讨论】：

我认为你想要否定 (if (aryClasses[i]!="resizable" || ...)) 而不是仅仅匹配已知的类。

【解决方案4】：

        function getDesiredClass( removedClassArr ){
            var classArray = $("selector").attr('class').split(" ");
            var desiredClassArray = [];
            for(var i = 0; i < classArray.length; i++ ){
               if ( !isUnDesiredClass(removedClassArr, classArray[i]) ){
                  desiredClassArray .push( classArray[i] );
               }
            }
            return desiredClassArray;
        }
       function isUnDesiredClass( removedClassArr , cls){
         for(var i = 0; i < removedClassArr.length; i++ ){
           if( removedClassArr[i] == cls ){
               return true;
            }
       }
      return false;
    }

【讨论】：

【解决方案5】：

您可以使用.hasClass 检查各个班级。

$("div").hasClass("class");

【讨论】：

这没有回答问题
尝试提供比您正在做的更好的解决方案。您应该告诉我们根本问题，以便我们提供更好的解决方案。

【解决方案6】：

这里已经回答了。 Get class list for element with jQuery.

您可以扩展它以仅获取数组中不可调整大小、可拖动或表格的字符串

【讨论】：

这与问题无关。
我不确定您为什么认为这与问题无关。引用的帖子提供了一种从元素中获取所有类名并将它们填充到数组中的方法。然后，您获取该数组并解析出您不想要的 3 个类。
为了增强您的答案，您可能应该将该答案中找到的代码改编为问题，而不是简单地链接到它。

【解决方案7】：

var classes = $('div').not('.resizable, .draggable, .table').attr('class').split(' ');

【讨论】：

【解决方案8】：

看看这个jsFiddle，我有你想要的东西。

另外，看看 jQuery :not selectors

【讨论】：