如何让 jQuery 选择带有 . (句号)在他们的身份证上?

IT技术 javascript jquery jquery-selectors
2021-01-27 22:45:23

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

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>

我能够更新 School 实例和学校的 Address 成员。这是相当不错的!感谢 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);
    });
  });
});
6个回答

来自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 常见问题解答上。

出于这个原因,在 CSS 本身中,您也必须在 ID 中转义一个点。jQuery 所做的一切都是要求您遵循 CSS 制定的规则。
2021-03-11 22:45:23
如果您不必转义,您将如何查询具有 ID 地址和类状态的元素(当然,如果您知道 ID,则不会通过指定类来添加太多内容,但它应该仍然有效,我会思考)?
2021-03-13 22:45:23
我想知道要求开发人员这样做的理由是什么,似乎 jQuery 中的一组简单的启发式方法可以解决这个问题,因为 ID 中的句点没有任何问题......
2021-03-27 22:45:23
您还可以按名称而不是 ID 进行选择。例如, $('[name="Address.Country"]')
2021-04-03 22:45:23

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

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

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

$('div[id=foo bar]').show();
id 中不允许有空格,即使在 HTML5 更自由的字符接受中也是如此。stackoverflow.com/questions/70579/...
2021-03-21 22:45:23
空格 != 句号
2021-03-24 22:45:23
是的,但是对于那些在 90 年代后期部署的编写糟糕的网络应用程序中坚持添加装饰品的可怜的傻瓜来说,它们是否被允许并不重要。
2021-04-02 22:45:23
我更喜欢这样做而不是使用转义字符......显然最好的解决方法是不要在 id 中使用句点。
2021-04-04 22:45:23
必须有四元组才能工作:` $( "div[id='"+variable+"']" )` 或 ` $( "div[id='foo bar' ]" ) `
2021-04-08 22:45:23

为 Jquery 转义:

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

用法示例:

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

更多信息在这里

我有同样的问题,为什么没有人看到这个?
2021-03-30 22:45:23
根据 jQuery 文档的解决方案是只添加一个“\”(斜线)。警报(escapeSelector(“some.id”));将输出为 some\.id。所以我猜替换正则表达式应该是 s.replace( /(:|\.|[|])/g, "\\\\$1" );
2021-04-02 22:45:23

刚刚发布的 ASP.NET MVC 的 Release Candidate 解决了这个问题,现在它用下划线代替了 ID 属性的点。

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

渲染到

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

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

点在 CSS 中具有特殊的含义来识别/组合类,这就是为什么在 ID 中使用它很麻烦的原因。“问题”不在于 jquery。
2021-03-22 22:45:23
我看不出这是如何“修复”的 - 为什么 ASP.NET MVC 必须将 ID 更改为 jQuery 需要的东西?我认为 jQuery 是问题所在,而不是使用 . 在身份证上。
2021-04-07 22:45:23

这在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.