如何让jQuery使用a选择元素。 （期间）在他们的ID？

Question

鉴于以下类和控制器的操作方法：

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); 
    }); 
    }); 
}); 

Answer 1

从Google Groups：

Use two backslashes before each special character.

A backslash in a jQuery selector escapes the next character. But you need two of them because backslash is also the escape character for JavaScript strings. The first backslash escapes the second one, giving you one actual backslash in your string - which then escapes the next character for 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); 
    }); 
    }); 
}); 

也检查了How do I select an element by an ID that has characters used in CSS notation?在jQuery常见问题。

Answer 2

只是附加信息： 检查这ASP.NET MVC issue #2403。

在问题解决之前，我使用自己的扩展方法（如Html.TextBoxFixed等），它只是用id属性中的下划线（不在名称属性中）替换点，以便使用jquery（如$（“ #Address_Street“），但在服务器上，它就像Address.Street。

示例代码如下：

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; 
} 

Answer 3

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

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

呈现给

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

欲了解更多信息，请查看发行说明，从第14页

Answer 4

如果id包含空格，则不能使用jQuery的ID选择上。使用属性选择：

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

如果可能的话，指定元素类型，以及：

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

Answer 5

使用两个反斜线it's OK，it's工作。 但是，如果您使用动态名称，我的意思是，一个变量名称，您将需要替换字符。

如果您鸵鸟政策wan't改变你的变量名，你可以这样做：

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

，比你有你的jQuery对象。

Answer 6

逃脱它的jQuery：

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

使用示例：

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

更多信息here。

Answer 7

这是记录在jQuery Selectors docs：

To use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~) as a literal part of a name, it must be escaped with with two backslashes: \\ . For example, an element with id="foo.bar" , can use the selector $("#foo\\.bar") .

总之，随着\\前缀.如下：

$("#Address\\.Country") 

为什么我的ID不.工作？

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

当作为\\.转义时，该点将被视为普通文本，没有特别的意义，与您想要的ID相符<div id="Address.Country">。

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

为什么2 \\？

正如在bdukes回答中指出的那样，我们需要2 \个字符。 \将在JavaScript中转义以下字符。硒JavaScript时解释字符串"#Address\.Country"，它会看到\，把它解释为采取以下字符litterally和删除它时，字符串传递中作为参数来$()。这意味着jQuery仍然会将该字符串视为"#Address.Country"。

这就是第二个\来玩的地方。第一个告诉JavaScript将第二个解释为文字（非特殊）字符。这意味着第二个将被jQuery看到，并且明白以下.字符是一个文字字符。

唷！也许我们可以想象这一点。

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

Answer 8

我解决了这个问题与jQuery的文档中给出的解决方案

我的功能：

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

function jq(myid){ 


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


} 

注：我删除了“＃”，因为在我的代码与其他Concat的标识文字

字体： Jquery Docs select element with especial chars