I'm using the get element by class function $(".classname") but it doesn't work when the class name has a space, plus sign, slash in it (I can't change the class names)

var summaryLEVEL5 = $(".LEVEL 5");
    var summaryLEVEL5Total = 0;
    for (i=0; i < summaryLEVEL5.length; i++){
        summaryLEVEL5Total = summaryLEVEL5Total + parseInt(summaryLEVEL5[i].innerHTML);
    }

    var columnLEVEL5CapGroup = $(".LEVEL 5CapGroup");
    columnLEVEL5CapGroup[columnLEVEL5CapGroup.length - 1].innerHTML = summaryLEVEL5Total;

the function above is what i am using. it seems to work for all the othe classnames but not ones with a space like between'level' and '5'

how can I escape space,plsu sign, forward slash?

I'm using the get element by class function $(".classname") but it doesn't work when the class name has a space, plus sign, slash in it (I can't change the class names)

var summaryLEVEL5 = $(".LEVEL 5");
    var summaryLEVEL5Total = 0;
    for (i=0; i < summaryLEVEL5.length; i++){
        summaryLEVEL5Total = summaryLEVEL5Total + parseInt(summaryLEVEL5[i].innerHTML);
    }

    var columnLEVEL5CapGroup = $(".LEVEL 5CapGroup");
    columnLEVEL5CapGroup[columnLEVEL5CapGroup.length - 1].innerHTML = summaryLEVEL5Total;

the function above is what i am using. it seems to work for all the othe classnames but not ones with a space like between'level' and '5'

how can I escape space,plsu sign, forward slash?

• javascript
• jquery

• 1 I'm pretty sure those characters aren't allowed in a class name - see stackoverflow./questions/448981/… – fin1te Commented Apr 19, 2011 at 13:58

6 Answers 6

Class names can't have spaces; if an html element has a class attribute like this:

<p class="foo bar">

that means it has two classes (foo and bar). You could select the above element in jQuery by doing

$(".foo.bar")

It does not make any sense for a class name to have a space in it. When a "class" attribute has multiple words separated by spaces, it means that the element has multiple separate class values. The way you find those is by juxtaposing two separate "." expressions:

var whatever = $('.LEVEL.5CapGroup');

No space between them, and a "." before each class name.

As to other "special" characters, jQuery will honor "\" as an escape character:

var whatever = $('.className\.WithDot');

The problem splits up in two groups: whitespace and others. For others, like brackets, it's straight forward: escape them with a backslash \, and you're done.

The space is trickier because of the definition of classes: They are a list of white-space separated tokens. That means, that you have no guarantee, that any browser will keep the order, in which the single classes are defined.

Fortunately you can then query each 'space-separated' class like this:

.LEVEL.5

Note, that the space is now replaced by a dot. You can, however, not apply this solution to more spaces in a row or decide between space and tab, for example.

You can't have a space in a CSS class name, this would result in a descendant selector: http://api.jquery./descendant-selector/ (CSS spec: http://www.w3/TR/CSS2/selector.html#descendant-selectors)

Have a look at the validation plug-in.

Whatever you do, validate the username at the server side too.

Here is the code for removing special characters (like !, >, ?, ., # etc.,) from a string using JavaScript:

<script language="JavaScript">
<!-- var temp = new String('This is a te!!!!st st>ring... So??? What...'); document.write(temp + '<br>'); temp =  temp.replace(/[^a-zA-Z 0-9]+/g,''); document.write(temp + '<br>'); //-->
</script>

Special chars like + can be used as classnames,

they must be escaped w SINGLE Backslash in the CSS

see How to escape any character in CSS;

http://mathiasbynens.be/notes/css-escapes

Have tested , and it works fine for CSS but in jQuery you use DOUBLE \\

:)