I wonder why jQuery doesn't allow "+" sign. Here is an example of how it works with "1" and "3" but not with "2+". Just mouse-over the text above every div.

<div id="div-2+"></div>

JSFiddle

$('a.hover').mouseover(function() {

    dataI = $(this).data('i');

	$('div#div-' + dataI).addClass('h');

});

$('a.hover').mouseout(function() {

    dataI = $(this).data('i');

	$('div#div-' + dataI).removeClass('h');

});

a {
    display: inline-block;
    width: 100px;
    margin: 60px 20px 60px 0;
    text-align: center;
}

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: #ddd;
}

div.h {
    background-color: #f00;
}

<script src=".11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1"></div>

<div id="div-2+"></div>

<div id="div-3"></div>

I wonder why jQuery doesn't allow "+" sign. Here is an example of how it works with "1" and "3" but not with "2+". Just mouse-over the text above every div.

<div id="div-2+"></div>

JSFiddle

$('a.hover').mouseover(function() {

    dataI = $(this).data('i');

	$('div#div-' + dataI).addClass('h');

});

$('a.hover').mouseout(function() {

    dataI = $(this).data('i');

	$('div#div-' + dataI).removeClass('h');

});

a {
    display: inline-block;
    width: 100px;
    margin: 60px 20px 60px 0;
    text-align: center;
}

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: #ddd;
}

div.h {
    background-color: #f00;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1"></div>

<div id="div-2+"></div>

<div id="div-3"></div>

• javascript
• jquery
• html
• jquery-selectors

• 1 I haven't lost too much sleep over this yet – garryp Commented May 11, 2015 at 22:26
• 1 Please bring the reproducing code here. An off-site link is insufficient. Also, tag JavaScript as such. – Lightness Races in Orbit Commented May 11, 2015 at 22:29
• 1 See How do I get jQuery to select elements with a . (period) in their ID? – Felix Kling Commented May 11, 2015 at 22:38
• 1 It sounds like a Very Bad Idea to use the option name to create the option id. What if your user enters the same option name twice? If you save each option to a database, try using id="id-{{database-id}}" : it will be both unique and a good value to use as an id. – JK. Commented May 11, 2015 at 22:56
• @JK. I know but here I use one row with 3 fields for option titles and option values: poll-id / "Option 1|-|Option 2|-|Option 3" / "0-0-0" – medk Commented May 11, 2015 at 23:20

3 Answers 3

Most-likely because the plus sign is the adjacent CSS selector, which causes the Sizzle selector library jQuery uses to assume you mean an adjacent selector.

One way around this would be to use an attribute selector, that selects the id attribute. Although many people would argue putting a plus sign in the id is a bad idea.

Working Example:

$('a.hover').mouseover(function() {

    dataI = $(this).data('i');

	$('div[id="div-' + dataI + '"]').addClass('h');

});

$('a.hover').mouseout(function() {

    dataI = $(this).data('i');

	$('div[id="div-' + dataI + '"]').removeClass('h');

});

a {
    display: inline-block;
    width: 100px;
    margin: 60px 20px 60px 0;
    text-align: center;
}

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: #ddd;
}

div.h {
    background-color: #f00;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1"></div>

<div id="div-2+"></div>

<div id="div-3"></div>

Note, "workaround"

Try utilizing css

a {
  display: inline-block;
  width: 100px;
  margin: 60px 20px 60px 0;
  text-align: center;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: #ddd;
}

a.hover[data-i="1"]:hover ~ div[id$="1"],
a.hover[data-i="2+"]:hover ~ div[id$="2+"],
a.hover[data-i="3"]:hover ~ div[id$="3"] {
  background-color: #f00;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1" class="hover"></div>

<div id="div-2+" class="hover"></div>

<div id="div-3" class="hover"></div>

@Alexander O'Mara does a nice job of explaining why it doesn't work and shows a decent work-around.

Another work-around is to escape the plus sign by preceding it with a backslash.

dataI = dataI.replace('+', '\\+');

jsfiddle

From the jQuery documentation for Selectors:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS specification contains the plete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

Also note that document.querySelector() throws the following error when given the selector #div-2+:

SyntaxError: An invalid or illegal string was specified.

jsfiddle