Javascript 如何通过jQuery通过前缀获取元素类

通过前缀获取元素类的最佳方法是什么

例如，我有：

<div class="cc-colour-red cc-size-big cc-width-narrow">

如何分别获得这些-颜色、大小和宽度

我希望这是有道理的

我选择了DOM元素。最终结果将是大、红、窄

谢谢

使用以下命令

$("div").prop("classList").forEach(function(entry) {
    console.log(entry.split('-')[2]);
});

---

如果要按类前缀获取DOM元素，可以使用以下选择器：

^=

如果您使用多个css类，则“包含”还有另一个选择器：

*=

例如：

$("[class^='cc-size-']")

您可以使用document.querySelector和选择器[class |=cc]、.className、.replace和RegExp/cc-|\s/g从替换字符串中排除前缀。也可以使用.match返回值数组

var values=document.querySelector[class |=cc] .className.replace/cc-|\s/g； console.logvalues； 尝试：

JavaScript

$("div").each(function(index, elem){
  var classes = $(elem).attr("class");
  var color = classes.replace(/.*cc-colour-([^\s]+).*/g, "$1");
  var size = classes.replace(/.*cc-size-([^\s]+).*/g, "$1");
  var width = classes.replace(/.*cc-width-([^\s]+).*/g, "$1");
  console.log(color, size, width); //red big narrow, blue small wide, green medium narrow
});

HTML

---

实现这一点的最佳方法是根本不使用类，而是为每个属性使用单独的data-*属性

如果无法更改HTML，则可以通过创建包含键/值对的对象数组来实现所需的功能。然后可以使用元素的索引将其与键/值对对象关联：

var arr = $('div').map(function() {
    var obj = {};
    for (var i = 0; i < this.classList.length; i++) {
        var className = this.classList[i];
        var matches = /^cc-(.+)-(.+)$/.exec(className);
        obj[matches[1]] = matches[2];
    }
    return obj;
}).get();

---

这种方法的优点是完全可扩展；如果您添加了任何其他类，那么代码将自动运行而不进行任何更改。

最好的方法是不要为此使用类。对每个属性使用单独的data-*属性。你能更改HTML格式吗？我知道，但在那种情况下这是不可能的。你想要什么？CSS颜色、字体大小和宽度的值？如果我理解正确，请看我的答案。我想得到大、红和窄这最多是半个答案。如何从类中获取键/值？我应该澄清一下。我已经选择了DOM元素，我想从元素的类中获取那些大的、红色的、前缀颜色、宽度等值。看看@RoryMcCrossan的答案，我认为这是最好的答案看看这个问题我认为这正是你想要的第一个描述导致了这样的事情。现在，在评论中，他解释得更详细了。对不起，我应该澄清一下。我相信这在第一篇文章中更有意义。OP中的div没有任何id，这不是一个问题吗？很好的解决方法，但我强烈建议使用数据值，too@ToniMichelCaubet我同意，正如我在第一段中提到的那样。我只能假设OP是从外部源提供的HTML，或者将其用作学习练习。@Arg0n可能，不过您也可以使用元素索引并将其放入数组中。在本例中，我使用了一个对象，以使示例更清晰，关联更容易。。。答案有点矛盾。

var arr = $('div').map(function() {
    var obj = {};
    for (var i = 0; i < this.classList.length; i++) {
        var className = this.classList[i];
        var matches = /^cc-(.+)-(.+)$/.exec(className);
        obj[matches[1]] = matches[2];
    }
    return obj;
}).get();

[{
    "colour": "red",
    "size": "big",
    "width": "narrow"
}]