如何让 jQuery 选择带有 .（句号）在他们的身份证件中？

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

从 谷歌网上论坛:

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

jQuery 选择器中的反斜杠转义下一个字符。但是您需要其中两个，因为Backslash也是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);
    });
  });
});

还请查看 如何通过 ID 选择具有 CSS 表示法中使用的字符的元素？ 关于 jQuery 常见问题解答。

Answer 2

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

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

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

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

Answer 3

将其转义为 Jquery：

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

用法示例：

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

更多信息 这里.

Answer 4

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

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

呈现到

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

有关的更多信息查看发布说明，开始第14页上。

Answer 5

这是记录在案 jQuery选择文件:

使用任何meta-characters(例如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)为文本的一部分，一个名称，它必须 能逃过与两个反斜杠: \\.例如，一个元素 id="foo.bar", ，可以利用的选择 $("#foo\\.bar").

总之，前缀 . 与 \\ 如下：

$("#Address\\.Country")

为什么不 . 工作我的身份？

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

当逃作 \\., 点将被视为正常的文字有没有特别的意义，配ID你的愿望 <div id="Address.Country">.

这适用于所有的人物 !"#$%&'()*+,./:;<=>?@[\]^`{|}~ 否则就会具有特殊意义，因为选择在！只是prepend \\ 把他们当作正常的文本。

为什么2 \\?

如bdukes的答案，还有一个原因是我们需要2 \ 字符。 \ 会逃跑的如下字在JavaScript。Se当JavaScript解释字符串 "#Address\.Country", 它将会看到的 \, 解释它的意思 采取以下字方式 和 删除 它当串通过的参数 $().这意味着jQuery仍然会看到的字符串 "#Address.Country".

那是第二 \ 来玩。第一个告诉JavaScript解释第二，作为一个文本(非专用)符。这意味着第二个将会看到，通过能力和理解，以下 . 角是一个文字。

唷！也许我们可以想象的。

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

Answer 6

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

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

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

和比你有你的jQuery对象。

Answer 7

仅有的附加信息： 勾选此 ASP.NET MVC问题＃2403 。

直到问题是固定的，我用我自己的扩展方法一样Html.TextBoxFixed等，简单地用下划线在id属性（而不是在name属性）取代圆点，让您使用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 8

我用jquery docs给出的解决方案解决了这个问题

我的功能：

//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 选择具有特殊字符的元素