Geek Answers Handbook

JQuery with a plus sign

I wonder why jQuery does not allow the "+" sign. Here is an example of how it works with "1" and "3", but not with "2+". Just mouse over the text above each 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.com/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>
+5
source share
3 answers

Most likely, because the plus sign is an adjacent CSS selector , which causes the use of the Sizzle selector library used by jQuery to suggest that you have a neighboring selector in mind.

One way: use an attribute selector that selects the id attribute. Although many people claim that the plus sign in 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.com/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>
+10
source

Note "workaround"

Try using 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.com/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>
+2
source

@ Alexander O'Mara explains quite well why he doesn’t work and shows decent work.

Another problem is to avoid the plus sign by preceding it with a backslash.

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

jsfiddle

From the jQuery documentation for selectors :

To use any of the metacharacters (for example,! !"#$%&'()*+,./:;<=> ?@ []^`{|}~ ) as the literal part of the name, it must escape with two backslashes: \\ . For example, an element with id="foo.bar" , you can use the $("#foo\\.bar") selector . The W3C CSS specification contains a complete set of rules regarding valid CSS selectors . Also useful in Matthias Binens blog on CSS escape characters for identifiers .

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

 SyntaxError: An invalid or illegal string was specified.

jsfiddle

+1
source

More articles:


All Articles