如何挑選以特定字符串開頭的類

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