特定の文字列で始まるクラスを選ぶ方法

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"ループで何をしたいのですか？$（これ）が持つすべてのクラスを循環させてICONで始まり、それを使ってイメージを追加します。

誰でも手助けできますか？

Answer 1

、class属性の値を取得するには、「」によって、それを分割し、取ります2番目の部分と画像を呼び出します。構文の

$(".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クラスが常に「アイコン」ではなく「ボタン」で始まることを前提としています。

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