Question

这可能很难解释，但我需要一种方法来遍历我已经选择的一堆元素，并且每一个都找到以“icon”开头的类。例如，我可能有以下元素

<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

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

Answer 2

尝试使用此选择器：

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

这应该只选择具有类按钮的元素，并且还有一个以'icon'开头的类。

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

Answer 3

对于每个元素，获取class属性的值，将其拆分为''，取第二部分并调用图像。

从头到尾

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

不完全确定语法，有点生锈！

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

3 个答案: