jQuery findClass and addClass

Question

I am writing a program wherein in there are 16 divs each div has a unique class name raging from 11, 12, 13... 44. Now I have written a math function to randomly choose a number from that array. I want to know how I can find the div with the randomly chosen class name and then I need to add a class to this div.

Code below,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            .row {
                width:520px;
                height:120px;
                border-color:#333;
                border-width:1px;
            }
            .sq-color {
                margin: 2px;
                width:120px;
                height:120px;
                float:right;
                background-color:#6C0;
            }
            .mole {
                background-image:url(images.jpg);
            }
        </style>
        <script>
            var items = Array(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44);
            var random = items[Math.floor(Math.random() * items.length)]
        </script>
        <title>Untitled Document</title>
    </head>
    <body>
        <div class="row">
            <div class="sq-color 11"></div>
            <div class="sq-color 12"></div>
            <div class="sq-color 13"></div>
            <div class="sq-color 14"></div>
        </div>
        <div class="row">
            <div class="sq-color 21"></div>
            <div class="sq-color 22"></div>
            <div class="sq-color 23"></div>
            <div class="sq-color 24"></div>
        </div>
        <div class="row">
            <div class="sq-color 31"></div>
            <div class="sq-color 32"></div>
            <div class="sq-color 33"></div>
            <div class="sq-color 34"></div>
        </div>
        <div class="row">
            <div class="sq-color 41"></div>
            <div class="sq-color 42"></div>
            <div class="sq-color 43"></div>
            <div class="sq-color 44"></div>
        </div>
    </body>
</html>

Thanks everyone. I tried the code and inserted accordingly but there is no change. No DIV seems to display the background image as given in .mole class.

Below is the code. Please let me know where am I flattering. I corrected the naming convention and added the letter 'c' to the class name. I am using class just to have more flexibility.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        .row {
            width:520px;
            height:120px;
            border-color:#333;
            border-width:1px;
        }
        .sq-color {
            margin: 2px;
            width:120px;
            height:120px;
            float:right;
            background-color:#6C0;
        }
        .mole {
            background-image:url(images.jpg);
        }
    </style>
    <script>
        var items = Array(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44);
        var random = items[Math.floor(Math.random() * items.length)]

         $('.c' + random).addClass('mole');
    </script>
    <title>Untitled Document</title>
</head>
<body>
    <div class="row">
        <div class="sq-color c11"></div>
        <div class="sq-color c12"></div>
        <div class="sq-color c13"></div>
        <div class="sq-color c14"></div>
    </div>
    <div class="row">
        <div class="sq-color c21"></div>
        <div class="sq-color c22"></div>
        <div class="sq-color c23"></div>
        <div class="sq-color c24"></div>
    </div>
    <div class="row">
        <div class="sq-color c31"></div>
        <div class="sq-color c32"></div>
        <div class="sq-color c33"></div>
        <div class="sq-color c34"></div>
    </div>
    <div class="row">
        <div class="sq-color c41"></div>
        <div class="sq-color c42"></div>
        <div class="sq-color c43"></div>
        <div class="sq-color c44"></div>
    </div>
</body>

ScottE · Answer 1 · 2012-11-02T01:27:40.750

1

Here you go: $("." + random).addClass("someClass");

As an aside, if these numbers are unique you're probably better off using IDs as the selector is faster. Also, this implies that the number has to be unique. Note - numeric IDs are only valid with a html5 doctype: <!doctype html>

That selector would be: $("#" + random).addClass("someClass");

edited Nov 02 '12 at 01:27

answered Nov 02 '12 at 01:22

ScottE

21,027
18
91
129

score 0 · Answer 2 · answered Nov 02 '12 at 01:22

0

You can use any method of concatenation you want to generate a jQuery selector string so long as the final result is valid with regard to jQuery selector practices

$('.' + random).addClass('someClass')

answered Nov 02 '12 at 01:22

charlietfl

164,229
13
110
143

score 0 · Answer 3 · edited Nov 02 '12 at 01:43

0

$('.'+random).addClass('yourclass');

edited Nov 02 '12 at 01:43

Kjuly

32,573
22
98
112

answered Nov 02 '12 at 01:24

Salvador Dali

182,715
129
638
708

score 0 · Answer 4 · answered Nov 02 '12 at 01:28

0

reading your question i think what you are asking is to togle class to show what random number was selected

$(".sq-color " + random).toggleClass("someClass");

answered Nov 02 '12 at 01:28

COLD TOLD

12,989
3
31
49

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

0

Keep in mind that you shouldn't use just a number for your class names / ids, see also: What are valid values for the id attribute in HTML?

edited May 23 '17 at 12:03

Community

1
1

answered Nov 02 '12 at 01:29

Tim

348
2
15

Tim - this should be left as a comment. Also, html5 doctype doesn't care about t his. – ScottE Nov 02 '12 at 01:31
I can't comment on other answers/questions yet. The HTML5 part is true, but he isn't using it in his example. And a more descriptive name is also a good reason not to use only a number – Tim Nov 02 '12 at 01:36

jQuery findClass and addClass

5 Answers5