Pass a constructed class name into JQuery

Question

I'm using an array to append to a base class name so I can iterate through different classes.

First bit works fine. Get a count on the array and as long as I exclude the last two lines of code I get all the desired class names in the console.

But once I add the last two lines the loop and try to add the constructed class name to get the different text values per class I get the following error:

Uncaught Error: Syntax error, unrecognized expression: '.moduleStatusDIS'

And it stops at the first iteration through the array. Code below.

function setModuleStatusColour() {

var array = ["DIS", "DDG", "CDX", "DKM", "DBV", "DBB", "DGK", "DAM", "LOG", "DUS", "DCL", "DRI"];
var arrayLength = array.length;
console.log(arrayLength);
for (x=0; x < arrayLength; x++){

    var className = "'"+'.moduleStatus'+array[x]+"'";
    console.log(className);
    var statusValue = $(className).text();
    console.log(statusValue);
}

}

I also tried to use eval() (although I know it's been deprecated, desperation got the better of me) see below. Same result as code above though.

function setModuleStatusColour() {

var array = ["DIS", "DDG", "CDX", "DKM", "DBV", "DBB", "DGK", "DAM", "LOG", "DUS", "DCL", "DRI"];
var arrayLength = array.length;
console.log(arrayLength);
for (x=0; x < arrayLength; x++){

    var className = "'"+'.moduleStatus'+array[x]+"'";
    console.log(className);
    eval('var statusValue = $(className).text()');
    console.log(statusValue);       
}

}

Even tried to cast the var className into a String but didn work for me either.

If I write it out class by class and don't use an array to construct the names it works fine but I tried to keep the code short and make it easy to add. So it has become a matter of principle :)

Any help would be greatly appreciated!

Stop appending and prepending single quotes to the selector? — amphetamachine
– amphetamachine, Commented Feb 18, 2016 at 14:27

Jamiec · Accepted Answer · 2016-02-18 14:28:52Z

5

This line:

var className = "'"+'.moduleStatus'+array[x]+"'";

should be simply

var className = ".moduleStatus" + array[x];

giving you a selector like

var statusValue = $(".moduleStatusDIS").text();

Selectors are just strings, there is no need to wrap it in single quotes.

answered Feb 18, 2016 at 14:28

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FullContactCoder Over a year ago

Thanks Jamie, absolutely positive I tried that first time around but probably got stuck in a brainfart!

Cespejo · Accepted Answer · 2016-02-18 14:37:32Z

3

It should be easy, just:

function setModuleStatusColour() {
    var array = ["DIS", "DDG", "CDX", "DKM", "DBV", "DBB", "DGK", "DAM", "LOG", "DUS", "DCL", "DRI"];
    var arrayLength = array.length;
    console.log(arrayLength);
    for (x=0; x < arrayLength; x++){
        var statusValue = $('.moduleStatus'+array[x]).text();
        console.log(statusValue);
    }

answered Feb 18, 2016 at 14:37

Cespejo

4142 silver badges11 bronze badges

1 Comment

FullContactCoder Over a year ago

Thanks for your reply Cespejo. Accepted the first correct answer but gave you an upvote. Have a great day!

DIEGO CARRASCAL · Accepted Answer · 2016-02-18 19:42:31Z

1

Selectors are conformed by: $(-string-) where -string- should be the name of a class preceded by a dot (".className"), or the name of an element like $("div") (but this will select all div elements!), or the id of an element preceded by a # symbol like $("#sendButton")... The reason why .className and #sendButton are surrounded by quotation is that they are strings that refer to attributes given to elements like so:

<div class="className">...</div> --> $(".className")
<div id="sendButton">..<div> --> $("#sendButton")
<div>...</div> --> $("div")

edited Feb 18, 2016 at 19:42

answered Feb 18, 2016 at 15:36

DIEGO CARRASCAL

2,12916 silver badges16 bronze badges

Collectives™ on Stack Overflow

Pass a constructed class name into JQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related