如何挑选以特定字符串开头的类

Question

这可能很难解释，但我需要一种方式来遍历我已经选择的一堆元素，并为每个找到以“图标”。因此，例如我可能有以下要素

<div class="button iconStar"></div> 
<div class="button iconPlus"></div> 
<div class="button iconLeft"></div> 
<div class="button iconRight"></div> 
<div class="button iconUp"></div> 
<div class="button iconDown"></div> 

所以，我首先选择的元素，并通过他们的循环....

$(".button").each(function(){ 
    // Some code here 

}); 

现在，我可以把下面的代码回路...

if ($(this).hasClass("iconStar")){ 
    $(this).append("<IMG SRC='Images/star.gif'>"); 

} 

然后，我将不得不重复每个可能的图标，这似乎是非常低效。

我想在“每个”循环中执行的操作只是遍历$（this）所有的类，然后挑选出以ICON开头的类，然后用它来追加图像。

任何人都可以帮忙吗？

Answer 1

对于每一个元素，获取类属性的值，通过把它分解'，取第二部分，并调用图像。

从我的头

$(".button[class^='button icon']").each(function(el){ 
classStr = el.className; 
classes = classStr.split(' '); 
image = 'images/' + classes[1] + '.jpg'; 
}); 

不能完全确定语法的顶部，有点生疏！

Answer 2

尝试使用这个选择：

$(".button[class^='button icon']") 

这应该只选择有钮类元素，也有以“图标”开始授课。

当然，这个选择器还假定你的CSS类总是以“button”开头而不是“icon”开头。

Answer 3

如果您不打算将类与图像关联，我建议不要使用类。 （这将是最正确的方式）我会做什么，而是放在rel标签图像的链接。

这是做你想做的，仍然会验证为有效的CSS。

<div class="button" rel="images/star.jpg">iconStar</div> 
<div class="button" rel="images/plus.jpg">iconPlus</div> 
<div class="button" rel="images/left.jpg">iconLeft</div> 
<div class="button" rel="images/right.jpg">iconRight</div> 
<div class="button" rel="images/up.jpg">iconUp</div> 
<div class="button" rel="images/down.jpg">iconDown</div> 
<script> 
$('.button').each(function() { 
    $(this).append("<img src='"+$(this).attr('rel')+"'>"); 
}); 
</script> 

在这里看到的例子：http://jsbin.com/acasu

注意，如果你使用了很多微小的图像，你会想用CSS Sprites。因为它会大大提高你的页面的性能。

如果你绝对必须做到这一点，你所提出的建议的方式，你可以做到以下几点：

$(".button[class^='button icon']").each(function() { 
    var iconSrc = $(this).attr('class').substr("button icon".length) 
    $(this).append("<img src='/images/"+iconSrc+".jpg'>"); 
});