将构造的类名传递给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!

Answer 1

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.

Answer 2

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);
    }

Answer 3

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