javascript - jQuery with the plus sign -

i wonder why jquery doesn't allow "+" sign. here example of how works "1" , "3" not "2+". mouse-over 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.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>

most-likely because the plus sign adjacent css selector, causes sizzle selector library jquery uses assume mean adjacent selector.

one way around use attribute selector, selects id attribute. although many people argue putting plus sign in id 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>