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

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'>");

}

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

我想在“each”循环中做的只是循环遍历 $(this) 拥有的所有类并挑选出以 ICON 开头的类，然后使用它来附加图像。

有人可以帮忙吗？

Answer 1

如果您不打算将类与图像相关联，我建议不要使用类。 (这将是最正确的方式)我会做的是在 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'>");
});