Comment choisir les classes qui commencent par une chaîne particulière

Question

Cela peut être difficile à expliquer, mais j'ai besoin d'un moyen de faire défiler un tas d'éléments que j'ai déjà sélectionnés et pour chacun trouver des classes qui commencent par le mot " icône". Ainsi, par exemple, je pourrais avoir les éléments suivants

<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> 

Alors, je commence par la sélection des éléments et en boucle à travers eux ....

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

}); 

Maintenant, je pourrais mettre le code suivant dans la boucle ...

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

} 

Je devrais alors répéter cela pour chaque icône possible, ce qui semble très inefficace. Ce que je voudrais faire dans la boucle "each" est de parcourir toutes les classes $ (this) et de choisir celle qui commence par ICON, puis de l'utiliser pour ajouter l'image.

Quelqu'un peut-il aider?

Answer 1

Pour chaque élément, obtenir la valeur de l'attribut de classe, divisée par « », prendre la deuxième partie et appeler l'image.

Du haut de ma tête

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

Pas tout à fait sûr de la syntaxe, peu rouillé!

Answer 2

Essayez d'utiliser ce sélecteur:

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

Cela devrait sélectionner uniquement les éléments qui ont le bouton de classe, et ont également une classe qui commencent par « icône ».

Bien sûr, ce sélecteur suppose également que votre classe CSS commence toujours par "bouton" d'abord et non "icône".

Answer 3

Je déconseille d'utiliser des classes si vous n'allez pas associer la classe à l'image. (qui serait la manière la plus correcte) Ce que je ferais à la place est de mettre un lien vers l'image dans la balise rel.

Cela fait ce que vous voulez, et validera toujours comme css valide.

<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> 

Voir l'exemple ici: http://jsbin.com/acasu

Remarque, si vous utilisez beaucoup de petites images, vous allez vouloir utiliser CSS Sprites. Comme cela va grandement améliorer les performances de votre page.

Si vous absolu fallait le faire la façon dont vous suggérez, vous pouvez effectuer les opérations suivantes:

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