如何选择 ID 中带有特殊字符的元素？答案

【问题标题】：How do I select an element with special characters in the ID?如何选择 ID 中带有特殊字符的元素？
【发布时间】：2017-12-07 14:33:02
【问题描述】：

如果输入“奇怪的名称”来模拟数组，我有一个包含很多网格的页面：

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

如何使用 jQuery 设置这些输入的值，具体来说，我将如何选择它们？我尝试了很多方法，但没有任何效果。

【问题讨论】：

标签： jquery html jquery-selectors

【解决方案1】：

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

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

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

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

这将在字面上匹配该 ID，并且不会将任何特殊字符视为特殊字符。

【讨论】：

【解决方案2】：

您需要转义 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" />

【讨论】：

【解决方案3】：

自从提出并回答了这个问题以来，DOM 和 CSSOM 领域已经进行了更多的开发，以使这对 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);

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

【讨论】：