Как выбрать классы, которые начинаются с определенной строки

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

} 

Я бы хотел повторить это для каждой возможной иконы, которая кажется очень неэффективной.

То, что я хотел бы сделать в цикле «каждый», - это просто цикл через все классы, которые есть (и есть), и выбрать тот, который начинается с 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-класс всегда начинается с «кнопки», а не «значок».

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