如何让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

来自Google网上论坛:

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

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

另请查看如何通过包含CSS表示法中使用的字符的ID选择元素？在jQuery FAQ上.

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的Release Candidate解决了这个问题,它现在用ID属性的下划线替换了点.

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

渲染到

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

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

Answer 5

这记录在jQuery Selectors 文档中：

要将任何元字符（例如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~）用作名称的文字部分，必须使用两个反斜杠对其进行转义：\\. 例如，带有 , 的元素 id="foo.bar"可以使用选择器$("#foo\\.bar")。

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

$("#Address\\.Country")

为什么.在我的 ID 中不起作用？

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

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

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

为什么 2 \\？

正如 bdukes 的回答中所指出的，我们需要 2 个\字符是有原因的。\将转义 JavaScript 中的以下字符。Se 当 JavaScript 解释该字符串时"#Address\.Country"，它会看到\，将其解释为表示随意采用以下字符并在该字符串作为参数传入时将其删除$()。这意味着 jQuery 仍会将字符串视为"#Address.Country".

这就是第二个\发挥作用的地方。第一个告诉 JavaScript 将第二个解释为文字（非特殊）字符。这意味着第二个将被 jQuery 看到并理解接下来的 . 字符是一个文字字符。

呼！也许我们可以想象一下。

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