html标签的id中的特殊字符答案

【问题标题】：special characters in id of html tagshtml标签的id中的特殊字符
【发布时间】：2011-10-04 06:20:23
【问题描述】：

在 html 代码中，我使用的是代码 <input type = "text" id = "abc@def.com"> 获取文本现在它需要获取在文本字段中输入的值。我正在使用 jquery 来做到这一点：

$( document ).ready( function() {
    $( ".bid" ).click( function() {
        idVal = this.id
        bidID = "#" + idVal + "bid"
        spanID = "#" + idVal + "cbid"
        bidValue = $(bidID).val();

        alert(idVal)
        alert(bidID)
        alert(bidValue) //this alert says undefined
        $( spanID ).html( '&nbsp;' ).load( '{% url online_machines %}?id=' + idVal + '&bidvalue=' + bidValue);
    });
});

通过这样做，我得到未定义的值错误。我试图从 id 中删除特殊字符以获取其值。但我需要带有特殊字符的 id。怎么能我使用 jquery 获得它的价值？

【问题讨论】：

标签： jquery html

【解决方案1】：

尝试转义：

$('#abc\\@def.com').val();

http://api.jquery.com/category/selectors/第一段

【讨论】：

我相信那会是 $('#abc\\@def\\.com')

【解决方案2】：

试一试，而不是 100% 确定这是否是您所追求的。让我知道：

$( document ).ready(function() {
    $(".bid").click(function() {
        idVal = $(this).attr('id');
        bidID = "#" + idVal + "bid";
        spanID = "#" + idVal + "cbid";
        bidValue = bidID.val();

        alert(idVal);
        alert(bidID);
        alert(bidValue);
        spanID.html('&nbsp;').load('{% url online_machines %}?id=' + idVal + '&bidvalue=' + bidValue);
    });
});

【讨论】：

【解决方案3】：

不要尝试使用 # 来获取 ID，而是尝试这样来匹配属性，

$('[id=ID]')

或

$('[id='+ID+']')

所以而不是

bidID = "#" + idVal + "bid"

你可以试试

bidID = "[id=" + idVal + "bid]"

【讨论】：

在某些情况下，您可能需要这样做：$("[id='ID']")
这可能行不通：$('[id='+ID+']') 你应该把 $('[id="'+ID+'"]') id 的值放在引号内

【解决方案4】：

$(document.getElementById('abc@def.com')) 也可以。

【讨论】：

【解决方案5】：

从版本 3 开始，JQuery 似乎有一个有用的方法，称为 escapeSelector。

$('#' + $.escapeSelector(my_id_with_special_chars));

https://api.jquery.com/jQuery.escapeSelector/

【讨论】：

【解决方案6】：

使用函数 CSS.escape() 选择该 DOM 元素。对于 id abc@def.com，您可以使用以下代码。

$("#" + CSS.escape('abc@def.com'));

【讨论】：

【解决方案7】：

下面的这个解决方案对我有用，它很干净：

//your HTML id has special characters: 
var option= "Some option with (parenthesis or @ )";
//use this type of jquery query:
$(`[id="order_${option}"]`).prop('checked',true)

【讨论】：