jQuery-提取'以'前缀

jQuery - extract class name that 'starts with' prefix

本文关键字：前缀 提取 jQuery-      更新时间：2023-09-26

我的物品有以下类别：

<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-']" )很容易地选择这样的元素，但如何用最短、最可读的代码提取变量（可以是一些全局对象）的类名呢？

这样？

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，如果不删除任何内容，则不返回任何内容。

您可以对每个找到的节点进行迭代，并对类进行迭代以找到匹配项；如果找到，删除该类并将其记录：

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));
});

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

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>

的简单方法

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

$.fn.hasClassStartsWith = function(className) {
    return this.filter('[class^='''+className+'''], [class*='''+className+''']');
}
var divs = $('div').hasClassStartsWith("some-class-");
console.log(divs.get());

请参阅fiddle

相关文章：