如何 select 一个 ID 中有特殊字符的元素？

Question

如果输入 "strange names" 模拟数组，我有一个包含很多网格的页面：

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

如何使用 jQuery 设置这些输入的值，具体来说，我将如何 select 它们？试了很多方法都没用

Answer 1

您需要转义 id 选择器中的 [、]、@ 和 . 字符。为此，请像这样使用 \：

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" />

Answer 2

问题是括号在 CSS 中有特殊含义（作为属性选择器），点也有特殊含义，作为 class 选择器。尝试 $.escapeSelector:

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

这将转义选择器，因此特殊字符不会影响选择。您也可以尝试使用属性选择器并将其用引号引起来：

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

这将逐字匹配该 ID，不会将任何特殊字符视为特殊字符。

Answer 3

自从提出并回答了这个问题后，DOM 和 CSSOM space 进行了更多开发，使 jQuery 用户和非jQuery 个用户。我出示 CSS.escape():

在jQuery中：

var id = "Punteggi[@counter].Descrizione";
var selector = `#${CSS.escape(id)}`;
var val = $(selector).val();

console.log(val);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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" />

没有jQuery:

var id = "Punteggi[@counter].Descrizione";
var selector = `#${CSS.escape(id)}`;
var val = document.querySelector(selector).value;

console.log(val);

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

如何 select 一个 ID 中有特殊字符的元素？

How do I select an element with special characters in the ID?

html

jquery

jquery-selectors