Показать классы, которые существуют в строке числа

У меня есть эта строка чисел var array = 1,6,2,9,5, полученная из API, поэтому я действительно могу изменить ее.

и у меня есть это в моем html:

<div class="1 btn">Foo 1</div>
<div class="2 btn">Foo 2</div>
<div class="3 btn">Foo 3</div>
<div class="4 btn">Foo 4</div>
<div class="5 btn">Foo 5</div>
<div class="6 btn">Foo 6</div>
<div class="7 btn">Foo 7</div>
<div class="8 btn">Foo 8</div>
<div class="9 btn">Foo 9</div>

Я хочу добавить к любому классу, который существует в массиве, класс 'foo'. Итак, в моем примере div 1,6,2,9,5 получит класс «foo».

Как я могу этого добиться?


javascript string jquery addclass
person jQuerybeast    schedule 23.03.2012    source источник
comment
Это 1,6,2,9,5 строка?   -  person Jon    schedule 23.03.2012
comment
Вероятно, это должно быть [1, 6, 2, 9, 5]. Люди не делают себе одолжений с неработающим примером кода в своих вопросах.   -  person Pointy    schedule 23.03.2012

Ответы (6)


arrow_upward
4
arrow_downward

Быстрый способ:

$('.' + array.join(', .')).addClass('foo');

изменить, если "массив" на самом деле является строкой:

$('.' + array.split(',').join(', .')).addClass('foo');
person Pointy    schedule 23.03.2012
comment
Спасибо. Я только что упомянул, что это не массив, а строка, так как я получаю эту ошибку: Uncaught TypeError: Object 1,6,2,9,5 не имеет метода 'join' - person jQuerybeast; 23.03.2012
comment
Хорошо, как я уже сказал, важно быть точным в своих вопросах :-) - person Pointy; 23.03.2012
comment
@Pointy Я не знаю, почему я подумал, что это массив. По крайней мере, знайте, что я буду проявлять особую осторожность, задавая любые вопросы. Спасибо - person jQuerybeast; 23.03.2012

arrow_upward
2
arrow_downward

Вы можете воспользоваться тем фактом, что jQuery позволяет использовать несколько селекторов, разделенных запятыми, что довольно близко к тому, что у вас уже есть:

Если array действительно массив:

$("." + array.join(", .")).addClass("foo");

Если это строка (например, "1,2,3"):

$("." + array.replace(/,/g, ", .")).addClass("foo");
person Jon    schedule 23.03.2012
comment
Спасибо. Я ошибся в своем вопросе, и это строка. Когда я использовал ваш второй вариант, только первые две строки получают класс. Когда я использую console.log(array.replace(,, , .); я получаю 1, .6,2,9,5 - person jQuerybeast; 23.03.2012
comment
@jQuerybeast: это была ошибка с моей стороны (я всегда забываю, что replace не заменяет все вхождения, если вы не подадите регулярное выражение в качестве первого параметра). Отредактировал ответ, чтобы исправить. - person Jon; 23.03.2012

arrow_upward
0
arrow_downward

Попробуй это:

for (var i=0; i<array.length; i++)
{
    $('.' + array[i]).addClass('foo');
}
person slash197    schedule 23.03.2012

arrow_upward
0
arrow_downward

Использование ES5 .some: http://jsfiddle.net/rkknp/1/.

var array = [1, 6, 2, 9, 5];

// filter elements that have a class apparent in the array
$(".btn").filter(function() {
    return array.some( $.fn.hasClass.bind( $(this) ) );
}).addClass("red");​
person pimvdb    schedule 23.03.2012

arrow_upward
0
arrow_downward

Вы используете недопустимые имена для своих классов CSS.

Имя может содержать символы a–z, A–Z, цифры 0–9, точку, дефис, экранированные символы, символы Юникода 161–255, а также любые символы Юникода в качестве числового кода, однако они не могут начинаться с тире или цифры.

См. http://www.w3.org/TR/CSS2/syndata.html#characters, Какие символы допустимы в именах классов CSS/ селекторы? и Разрешенные символы для идентификаторов CSS.

person Stefan    schedule 23.03.2012

arrow_upward
0
arrow_downward

Это должно работать. Обратите внимание, что я использую jQuery в этом коде.

var yourArray = [1,6,2,9,5];
var elements = $('div');

for(var i=0; i<yourArray.length; i++){
    $(elements[yourArray[i]-1]).addClass('foo');
}
person Ivan Lazarevic    schedule 23.03.2012