How do I select an element with special characters

问题:

I have a page with a grid containing a lot if input with "strange names" to simulate an array:

 <input type="text" id="Punteggi[@counter].Descrizione" readonly="readonly" tabindex="-1" name="Punteggi[@counter].Descrizione" class="{validate: {required:true}}" value="@item.Descrizione" /> 

How can I set the value of these inputs with jQuery, specifically, how would I select them? I tried in a lot of ways but nothing works.

回答1:

The problem is that brackets have special meaning in CSS (as attribute selectors) and dots do too, as class selectors. Try $.escapeSelector:

$('#' + $.escapeSelector('Punteggi[@counter].Descrizione'))

This will escape the selector so the special characters don't affect the selection. You could also try using an attribute selector and wrapping that in quotes:

$('[id="Punteggi[@counter].Descrizione"]')

This will literally match that ID and won't treat any of the special characters as special characters.

回答2:

You need to escape the [, ], @ and . characters in the id selector. To do that, use \\ like this:

var val = $('#Punteggi\\[\\@counter\\]\\.Descrizione').val();

console.log(val);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Punteggi[@counter].Descrizione" readonly="readonly" tabindex="-1" name="Punteggi[@counter].Descrizione" class="{validate: {required:true}}" value="@item.Descrizione" />