jQuery - 提取以特定前缀开头的类名

Question

我的项目具有以下类别：

<div class="class-x some-class-1 other-class"></div>
<div class="some-class-45 class-y"></div>
<div class="some-class-123 something-else"></div>

我想知道是否有一种简单的方法来实现以下目标：

1. 仅获取所有以 some-class- 前缀开头的类。
2. 从每个元素中删除它们。
3. 将它们的名称（而不是对应的 DOM 元素）存储在变量中？

我可以使用 jQuery("div[class^='some-class-'], div[class*=' some-class-']") 轻松选择这些元素，但如何用最短且最易读的代码将它们的类名提取到一个变量中（可以是某个全局对象）？

- Atadj

---

查看答案：使用jQuery获取元素的类列表。 - Trylks

@Trylks 太好了！这实际上解决了我的问题，而且方法更好！谢谢！（不过，提取这个名称的方法还是有点麻烦） - Atadj

Answer 1

这样可以吗？

var arrClasses = [];
$("div[class*='some-class-']").removeClass(function () { // Select the element divs which has class that starts with some-class-
    var className = this.className.match(/some-class-\d+/); //get a match to match the pattern some-class-somenumber and extract that classname
    if (className) {
        arrClasses.push(className[0]); //if it is the one then push it to array
        return className[0]; //return it for removal
    }
});
console.log(arrClasses);

Fiddle

.removeClass()可以接受一个回调函数来执行一些操作，并返回要被删除的className，如果没有需要删除的，则返回空。

- PSL

---

工作得非常好！干净而优雅！ - Atadj

天才解决方案。 - The J

Answer 2

您可以遍历每个找到的节点并遍历类以查找匹配项；如果找到，则删除该类并记录日志：

var found = [];

$('div[class*="some-class-"]').each(function() {
  var classes = this.className.split(/\s+/),
  $this = $(this);

  $.each(classes, function(i, name) {
      if (name.indexOf('some-class-') === 0) {
          $this.removeClass(name);
          found.push(name);
      }
  });
});

请注意，像 div[class*="some-class-"] 这样的选择器非常耗费资源，而且由于您需要进行额外的处理，所以最好只是迭代所有的 div 标签并对它们进行处理。

var elements = document.getElementsByTagName('div'),
found = [];

$.each(elements, function(i, element) {
    var classes = element.className.split(/\s+/);

    $.each(classes, function(i, name) {
        if (name.indexOf('some-class-') === 0) {
            $(element).removeClass(name);
            found.push(name);
        }
    });
});

现代浏览器提供了 Element.classList，您可以使用它来操作类名，以及使用Array.forEach进行迭代：

var found = [];

[].forEach.call(document.getElementsByTagName('div'), function(element) {
    (function(names, i) {
        while (i < names.length) {
            var name = names[i];
            if (name.indexOf('some-class-') === 0) {
                names.remove(name);
                found.push(name);
            } else {
                ++i;
            }
        }
    }(element.classList, 0));
});

- Ja͢ck

Answer 3

你可以循环遍历所有元素，使用正则表达式获取类名并将其存储在数组中：

var classNames = [];
$('div[class*="some-class-"]').each(function(i, el){
    var name = (el.className.match(/(^|\s)(some\-class\-[^\s]*)/) || [,,''])[2];
    if(name){
        classNames.push(name);
        $(el).removeClass(name);
    }
});
console.log(classNames);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class-x some-class-1 other-class"></div>
<div class="some-class-45 class-y"></div>
<div class="some-class-123 something-else"></div>

- nderscore

---

演示链接失效。 - Vulgo Alias

@VulgoAlias 链接并没有失效，但我已经将代码从链接中移至答案中了 :) - nderscore

Answer 4

简单的方法

您可以创建自己的过滤器：

$.fn.hasClassStartsWith = function(className) {
    return this.filter('[class^=\''+className+'\'], [class*=\''+className+'\']');
}

var divs = $('div').hasClassStartsWith("some-class-");
console.log(divs.get());

查看fiddle

- Damien