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

我能夠更新 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);
    });
  });
});

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 常見問題解答上。

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")

為什么沒有. 用我的身份證工作？

問題是. 具有特殊意義，后面的字符串被解釋為類選擇器。 所以$('#Address.Country')將匹配<div id="Address" class="Country"> 。

當轉義為\\\\. ，點將被視為沒有特殊意義的普通文本，匹配您想要的 ID <div id="Address.Country"> 。

這適用於所有字符!"#$%&'()*+,./:;<=>?@[\\]^`{|}~否則作為 jQuery 中的選擇器具有特殊意義。只需添加\\\\將它們視為普通文本。

為什么是 2 \\\\ ？

正如 bdukes 的回答所述，我們需要 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.

Answer 6

使用兩個反斜杠沒關系，它的工作。 但是，如果您使用的是動態名稱，我的意思是變量名稱，則需要替換字符。

如果您不想更改變量名稱，您可以這樣做：

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

並且比你有你的 jquery 對象。

Answer 7

我用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 選擇帶有特殊字符的元素

Answer 8

只是附加信息：檢查這個ASP.NET MVC 問題 #2403 。

在問題得到解決之前，我使用我自己的擴展方法，如 Html.TextBoxFixed 等，它只是在 id 屬性（而不是在 name 屬性中）中用下划線替換點，這樣你就可以像 $("#Address_Street") 這樣使用 jquery但在服務器上，它就像 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;
}