如何让 jQuery 选择 ID 中带有. (句点)的元素？

给定以下类和控制器操作方法:

public School
{
public Int32 ID { get; set; }
publig String Name { get; set; }
public Address Address { get; set; }
}


public class Address
{
public string Street1 { get; set; }
public string City { get; set; }
public String ZipCode { get; set; }
public String State { get; set; }
public String Country { get; set; }
}


[Authorize(Roles = "SchoolEditor")]
[AcceptVerbs(HttpVerbs.Post)]
public SchoolResponse Edit(Int32 id, FormCollection form)
{
School school = GetSchoolFromRepository(id);


UpdateModel(school, form);


return new SchoolResponse() { School = school };
}

表格如下:

<form method="post">
School: <%= Html.TextBox("Name") %><br />
Street: <%= Html.TextBox("Address.Street") %><br />
City:  <%= Html.TextBox("Address.City") %><br />
Zip Code: <%= Html.TextBox("Address.ZipCode") %><br />
Sate: <select id="Address.State"></select><br />
Country: <select id="Address.Country"></select><br />
</form>

我能够更新学校的实例和学校的地址成员。真不错！感谢 ASP.NET MVC 团队！

但是，如何使用 jQuery 选择下拉列表以便预先填充它？我意识到我可以做这个服务器端，但会有其他动态元素的网页，影响列表。

下面是我目前为止得到的信息，由于选择器似乎与 ID 不匹配，所以它不起作用:

$(function() {
$.getJSON("/Location/GetCountryList", null, function(data) {
$("#Address.Country").fillSelect(data);
});
$("#Address.Country").change(function() {
$.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
$("#Address.State").fillSelect(data);
});
});
});
95105 次浏览
小开
最佳答案

来自 谷歌群组:

在每个特殊字符前使用两个反斜杠。

JQuery 选择器中的反斜杠将转义下一个字符 其中两个是因为反斜杠也是 JavaScript 的转义字符 第一个反斜杠转义第二个反斜杠，给你一个实际的 字符串中的反斜杠-然后转义 jQuery 的下一个字符。

所以，我猜你在看

$(function() {
$.getJSON("/Location/GetCountryList", null, function(data) {
$("#Address\\.Country").fillSelect(data);
});
$("#Address\\.Country").change(function() {
$.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
$("#Address\\.State").fillSelect(data);
});
});
});

还可以查看 jQuery FAQ 中的 我如何选择一个 ID 的元素，有字符使用的 CSS 符号？。

小开

补充信息: 看看这个 NET MVC 发行号 # 2403。

在问题解决之前，我使用自己的扩展方法，比如 Html。TextBoxfix 等等，它只是在 id 属性中用下划线替换点(不在 name 属性中) ，这样你就可以像 $(“ # Address _ Street”)那样使用 jquery，但是在服务器上，它就像 Address。街道。

示例代码如下:

public static string TextBoxFixed(this HtmlHelper html, string name, string value)
{
return html.TextBox(name, value, GetIdAttributeObject(name));
}


public static string TextBoxFixed(this HtmlHelper html, string name, string value, object htmlAttributes)
{
return html.TextBox(name, value, GetIdAttributeObject(name, htmlAttributes));
}


private static IDictionary<string, object> GetIdAttributeObject(string name)
{
Dictionary<string, object> list = new Dictionary<string, object>(1);
list["id"] = name.Replace('.', '_');
return list;
}


private static IDictionary<string, object> GetIdAttributeObject(string name, object baseObject)
{
Dictionary<string, object> list = new Dictionary<string, object>();
list.LoadFrom(baseObject);
list["id"] = name.Replace('.', '_');
return list;
}
小开

刚刚发布的 ASP.NET MVC 的发布候选版本修复了这个问题，它现在用 ID 属性的下划线替换了圆点。

<%= Html.TextBox("Person.FirstName") %>

显示到

<input type="text" name="Person.FirstName" id="Person_FirstName" />

有关更多信息，请从第14页开始查看发行说明。

小开

如果 id 包含空格，就不能使用 jQuery id 选择器。使用属性选择器:

$('[id=foo bar]').show();

如果可能，还要指定元素类型:

$('div[id=foo bar]').show();
小开

使用两个反斜杠没关系，这是工作。 但是如果您使用的是动态名称，我的意思是，变量名称，您将需要替换字符。

如果你不想改变你的变量名，你可以这样做:

var variable="namewith.andother";
var jqueryObj = $(document.getElementById(variable));

然后就有了 jquery 对象。

小开

为 Jquery 逃脱:

function escapeSelector(s){
return s.replace( /(:|\.|\[|\])/g, "\\$1" );
}

用法例子:

e.find('option[value='+escapeSelector(val)+']')

更多信息。

小开

这在 JQuery 选择器文档中有记载:

使用任何元字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)作为名称的字面部分，它必须 使用两个反斜杠转义: \\ 0，可以使用选择器 $("#foo\\.bar")。

简而言之，以 \\作为 .的前缀如下:

$("#Address\\.Country")

为什么 .在我的身份证里不起作用？

问题是 .有特殊的意义，下面的字符串被解释为类选择器。所以 $('#Address.Country')会匹配 <div id="Address" class="Country">。

当转义为 \\.时，点将被视为没有特殊意义的正常文本，匹配您想要的 <div id="Address.Country"> ID。

这适用于在 jQuery 中作为选择器具有特殊意义的所有字符 !"#$%&'()*+,./:;<=>?@[\]^`{|}~。只要预设 \\将它们视为正常文本即可。

为什么是2 \\？

正如在公爵的回答，有一个原因，我们需要2个 \字符。\将在 JavaScript 中转义以下字符。当 JavaScript 解释字符串 "#Address\.Country"时，它将看到 \，当字符串作为参数传递给 $()时，它将解释为意味着 按字面意思理解下列字符和 拿开。这意味着 jQuery 仍将看到字符串为 "#Address.Country"。

这就是第二个 \的用武之地。第一个函数告诉 JavaScript 将第二个函数解释为文字(非特殊)字符。这意味着第二个字符将被 jQuery 看到，并理解下面的 .字符是一个文本字符。

也许我们可以想象一下。

//    Javascript, the following \ is not special.
//         |
//         |
//         v
$("#Address\\.Country");
//          ^
//          |
//          |
//      jQuery, the following . is not special.
小开

我用 jquery 文档提供的解决方案解决了这个问题

我的职责:

//funcion to replace special chars in ID of  HTML tag


function jq(myid){




//return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );
return myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );




}

注意: 我删除了“ #”，因为在我的代码中我用另一个文本连接 ID

字体: Jquery Docs 选择带有特殊字符的元素


提交答案