jQuery获取特定类名

Question

我有一个带有几个类别的 div，没有特定的顺序。

<div class="whatever styledark myclass"></div>

我对styledark类很感兴趣。它可以是styledark、stylewhite、stylered等等。我想要获取这个类名称，无论在单词style之后跟着什么颜色。问题是，当我点击div时，如何警告显示以单词style开头的类名，而忽略div中其他类。这些类没有特定的顺序。

- Pinkie

---

这不是不可能，但很笨拙。此外，它将会非常慢。您能不能添加另一个类到属性中？ - lonesomeday

你为什么想要这样做？你的最终目标是什么？ - Felix Kling

@lonesomeday 我想知道这个 div 元素有什么颜色类。除非你能推荐一种方法，否则我看不到其他解决办法。 - Pinkie

@felix，用户使用提供的工具构建表单，当用户返回编辑表单时，可用样式的编辑选择框应突出显示表单的当前样式。了解表单当前样式颜色的唯一方法是获取以样式开头的类名。 - Pinkie

Answer 1

这是一个很好的问题。虽然可以使用这里提到的许多答案来完成，但从性能角度来看，这有点笨拙和昂贵。我建议您将样式类放在最后，这样只用一行代码就可以输出您要查找的类名。

$('element').attr('class').split(' ').pop();

- Hussein

---

@Hussein，他提到的myclass是他正在寻找的类。 - SIFE

@SIFE，我不是在寻找myclass。否则，如果类名已知，我就不会问这个问题了。 - Pinkie

绑定使用“将样式类最后放置”的约定似乎相当不好。个人而言，我更喜欢一种更可靠的解决问题的方式，而且我认为这个“代码行”在效率上并没有比其他答案更高效（它仍然使用 CSS 选择器并访问“class”属性）。 - gion_13

@gion_13，我不明白你在评论中的意思。我想看看你解决这个问题的替代方法，而不是发表一些对OP没有帮助的评论。 - Hussein

但是如果他以后想要添加类呢？这会破坏你的代码。我同意@gion_13的观点，尽管（惊讶地说）我更喜欢我的解决方案，或者像@Kai那样使用正则表达式。 - roberkules

Answer 2

$('div').click(function() {
    var style = this.className.split(/\s/).filter(function( cn ) {
        return cn.indexOf('style') === 0;
    });

    alert(style);
});

请注意，此代码使用Array.prototype.filter和.indexof()，这在旧的浏览器中不可用。为了使其更通用，代码应该如下：

$('div').click(function() {
    var name = '';

    $.each(this.className.split(/\s/), function( _, cn ) {
        if( cn.indexOf('style') === 0 ) { name = cn; return false; }
    });

    alert(name);
});

- jAndy

---

谢谢@jandy，但它必须是跨浏览器的。在回复felix的评论中解释了我的情况后，我想知道这是否是我尝试做的最好方式。 - Pinkie

@Pinkie：实际上它几乎是跨浏览器的，除非你要处理IE7及以下版本。不过，我已经添加了一个更兼容的版本。 - jAndy

Answer 3

$('div').click(function(){
    var c = $(this).attr('class').split(/\s+/);
    for(var s in c)
        if(c[s].indexOf('style') == 0)
            alert(c[s]);
});

实时示例：http://jsfiddle.net/gion_13/rXkNy/1/

- gion_13

Answer 4

我以前使用过classList属性，但不幸的是它在safari中似乎不存在。 :( 下面是我想到的解决方法，但是RegExp可能需要稍微调整一下。

$('div.button').each(function() {
        $m =  this.className.match(/(^|\s)style\S+(\s|$)/);
    if($m) {
        $(this).bind('click', { colorName : $m[0] }, function(e) {
            alert(e.data.colorName);
        );
    }
});

- Kyle

Answer 5

在这里找到：http://forum.jquery.com/topic/jquery-how-to-pick-out-classes-that-start-with-a-particular-string。该链接涉及到如何使用jQuery选择以特定字符串开头的类。

var icons = ["Star", "Plus", "Left", "Right", "Up", "Down"];

$("div.button").each(function() {
    var $dv = $(this);
    $.each(icons, function() {
        if ($dv.hasClass("icon" + this)) {
            $dv.append('<img src="Images/' + this + '.gif" alt="" />');
            return false;
        }
    });
});

- Kon

Answer 6

假设您有一个名为“classes”的变量，其中包含类名称列表：

classes = classes.split(" ");
for (var i=0; i<classes.length; i++)
{
    var class = classes[i];
    if (class.indexOf("style") == 0)
    {
        alert(class);
    }
}

- Zach

Answer 7

$("div[class]").click(function(e){
    $.each(this.className.split(/\s/), function(i, val) {
        if (/^style/.test(val)) {
            alert(val.substr(5));
            return false;
        }
    });
});

- roberkules

Answer 8

$('element').attr("class").split(" ").filter(getStyleClass);

function getStyleClass(value) {
    return value.indexOf("style") > -1;
}

当点击时，根据您的指定，警报“style”类：

$('element').click(function()[
    var style_class = $(this).attr("class").split(" ").filter(getStyleClass);
    alert(style_class);
}
// include the same getStyleClass from above

更深入的了解：

$('element').attr("class").split(" ") 是一个很好的开始 - 它将类放在一个数组中，但是 .pop() 只是简单地删除数组的最后一个元素，并没有解决问题。

.filter() 是一个很好的解决方案，因为你可以编写一个小函数来决定哪些元素你想要。

在我们的例子中，我们只想要数组中具有 'style' 的元素。我们可以使用 .indexOf() 来判断字符串是否包含 "style" ，像这样：value.indexOf("style") > -1。

- Travis Heeter