Wie man Klassen auswählt, die mit einer bestimmten Zeichenkette beginnen

Question

Das ist vielleicht schwer zu erklären, aber ich brauche eine Möglichkeit, eine Reihe von Elementen durchzugehen, die ich bereits ausgewählt habe und für jede Klasse zu finden, die mit dem Wort " Symbol". So zum Beispiel habe ich die folgenden Elemente So

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

haben könnte, beginne ich mit der Auswahl der Elemente und Looping durch sie ....

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

}); 

Nun konnte ich den folgenden Code in der Schleife setzen ...

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

} 

würde ich dann, dass für jedes mögliche Symbol wiederholen müssen, was sehr ineffizient zu sein scheint.

Was ich in der "each" -Schleife tun möchte, ist nur Zyklus durch alle Klassen, die $ (this) hat und wählen Sie die, die mit ICON beginnt und verwenden Sie dann, um das Bild anzuhängen.

Kann jemand helfen?

Answer 1

Für jedes Element, um den Wert des Klassenattribut erhalten, teilen Sie es durch ‚‘, nehmen die zweiter Teil und rufen Sie das Bild auf.

Von der Spitze von meinem Kopf

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

Nicht ganz sicher der Syntax, wenig eingerostet!

Answer 2

Versuchen Sie diesen Selektor:

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

Diese nur Elemente auswählen sollten, die die Klasse Taste haben, und haben auch eine Klasse, die mit ‚Symbol‘ starten.

Natürlich setzt dieser Selektor auch voraus, dass Ihre CSS-Klasse immer zuerst mit "button" beginnt und nicht mit "icon".

Answer 3

Ich empfehle gegen die Verwendung von Klassen, wenn Sie die Klasse nicht mit dem Bild verknüpfen. (welches wäre der korrekteste Weg) Was ich stattdessen tun würde, ist eine Verknüpfung zu dem Bild in der Rel-Tag.

Dies tut, was Sie wollen, und wird immer noch als gültig CSS validieren.

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

das Beispiel hier ansehen: http://jsbin.com/acasu

Hinweis, wenn Sie viele kleinen Bilder verwenden, die Sie verwenden CSS Sprites wollen gehen. Dadurch wird die Leistung Ihrer Seite erheblich verbessert.

Wenn Sie absolute musste es tun, wie Sie vorschlagen, können Sie folgendes tun:

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