Display classes of which exists in an string of number

Question

I have this string of numbers var array = 1,6,2,9,5 which is retrieved from an API so I can really change the way it is.

and I have this in my 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>

I want to add on any class that exists into the array a class 'foo'. So in my example div's 1,6,2,9,5 will get a class 'foo'.

How can I achieve that?

Probably it should be `[1, 6, 2, 9, 5]`. People do themselves no favors with broken sample code in their questions. — Pointy, Mar 23 '12 at 12:22

Pointy · Accepted Answer · 2012-03-23T12:40:51.743

4

A quick way:

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

edit — if the "array" is actually a string:

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

edited Mar 23 '12 at 12:40

answered Mar 23 '12 at 12:23

Pointy

405,095
59
585
614

Thank you. I just mentioned that it is not an array but a string since I get this error: Uncaught TypeError: Object 1,6,2,9,5 has no method 'join' – jQuerybeast Mar 23 '12 at 12:34
OK, well as I said it's important to be accurate in your questions :-) – Pointy Mar 23 '12 at 12:40
1

@Pointy I dont know why I thought it was an array. At least know I will take extra care when asking any questions. Thank you – jQuerybeast Mar 23 '12 at 12:45

Jon · Answer 2 · 2012-03-23T12:45:18.710

2

You can take advantage of the fact that jQuery will allow you multiple selectors separated by commas, which is pretty close to what you already have:

If array is really an array:

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

If it's a string (e.g. "1,2,3") instead:

$("." + array.replace(/,/g, ", .")).addClass("foo");

edited Mar 23 '12 at 12:45

answered Mar 23 '12 at 12:24

Jon

428,835
81
738
806

Thank you. I was wrong on my question and it is a string. When I used your second option, only the first 2 strings get the class. When I use console.log(array.replace(",", ", ."); I get 1, .6,2,9,5 – jQuerybeast Mar 23 '12 at 12:38
@jQuerybeast: That was a mistake on my part (I always keep forgetting how `replace` does not replace all occurrences unless you feed it a regex as the first parameter). Edited the answer to fix. – Jon Mar 23 '12 at 12:46

score 0 · Answer 3 · answered Mar 23 '12 at 12:22

0

Try this:

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

answered Mar 23 '12 at 12:22

slash197

9,028
6
41
70

score 0 · Answer 4 · answered Mar 23 '12 at 12:26

0

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

answered Mar 23 '12 at 12:26

pimvdb

151,816
78
307
352

score 0 · Answer 5 · edited May 23 '17 at 12:00

You are using invalid names for your CSS classes.

The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit.

See http://www.w3.org/TR/CSS2/syndata.html#characters, Which characters are valid in CSS class names/selectors? and Allowed characters for CSS identifiers.

score 0 · Answer 6 · answered Mar 23 '12 at 12:29

0

This should work. Note that I'm using jQuery in this code

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

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

answered Mar 23 '12 at 12:29

Ivan Lazarevic

371
2
7

Display classes of which exists in an string of number

6 Answers6