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

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

}

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

То, что я хотел бы сделать в цикле «каждый», это просто перебрать все классы, которые есть у $ (this), и выбрать тот, который начинается с ICON, а затем использовать его для добавления изображения.

Кто-нибудь может помочь?

Answer 1

Я рекомендую не использовать классы, если вы не собираетесь связывать класс с изображением. (, что было бы наиболее правильным способом ). Вместо этого я поместил бы ссылку на изображение в тег 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'>");
});

Answer 2

Для каждого элемента получите значение атрибута класса, разделите его на '', возьмите вторую часть и вызовите изображение.

С макушки моей головы

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

Не совсем уверен в синтаксисе, немного ржавый!

Answer 3

Попробуйте использовать этот селектор:

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

При этом следует выбирать только те элементы, у которых есть кнопка класса, а также класс, начинающийся с 'icon'.

Конечно, этот селектор также предполагает, что ваш класс CSS всегда начинается с «кнопки», а не с «значка».