How to pick out classes that start with a particular string.

Question

This might be hard to explain, but I need a way to loop through a bunch of elements I've already selected and for each one find classes that start with the word "icon". So for example I might have the following elements

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

So, I begin by selecting the elements and looping through them....

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

});

Now, I could put the following code in the loop...

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

}

I would then have to repeat that for each possible icon, which seems very inefficient.

What I'd like to do in the "each" loop is just cycle through all the classes that $(this) has and pick out the one that begins with ICON and then use that to append the image.

Can anyone help?

Answer 1

Try using this selector:

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

This should select only elements that have the class button, and also have a class that start with 'icon'.

Of course, this selector also assumes that your CSS class always begins with "button" first and not "icon".

Answer 2

I recommend against using classes if you're not going to associate the class with the image. (which would be the most correct way) What I would do instead is put a link to the image in the rel tag.

This does what you want, and will still validate as valid 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>

See the example here: http://jsbin.com/acasu

Note, if you're using a lot of tiny images, you're going to want to use CSS Sprites. As it will greatly improve the performance of your page.

If you absolute had to do it the way you are suggesting, you could do the following:

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

Answer 3

For each element, get the value of the class attribute, split it by ' ', take the second part and call the image.

From the top of my head

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

Not entirely sure of the syntax, bit rusty!