如何让jQuery选择带有的元素。 （期间）他们的身份证？

时间：2008-12-08 17:49:43

标签： javascript jquery jquery-selectors

给出以下类和控制器操作方法：

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

8 个答案:

答案 0 :(得分：282)

来自Google Groups：

  

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

     

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

还可以在jQuery FAQ上查看How do I select an element by an ID that has characters used in CSS notation?。

答案 1 :(得分：25)

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

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

如果可能，也请指定元素类型：

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

答案 2 :(得分：11)

逃离Jquery：

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

用法示例：

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

更多信息here。

答案 3 :(得分：9)

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

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

渲染

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

有关详细信息，请参阅从第14页开始的发行说明。

答案 4 :(得分：4)

jQuery Selectors docs中记录了这一点：

  

使用任何元字符（例如   !"#$%&'()*+,./:;<=>?@[\]^`{|}~）作为名称的字面部分，它必须   使用两个反斜杠进行转义：\\。例如，一个元素   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中转义以下字符。当JavaScript解释字符串"#Address\.Country"时，它会看到\，将其解释为以及删除以及删除 string作为参数传递给$()。这意味着jQuery仍会将字符串视为"#Address.Country"。

这就是第二个\进场的地方。第一个告诉JavaScript将第二个解释为文字（非特殊）字符。这意味着第二个将被jQuery看到并理解以下.字符是文字​​字符。

唷！也许我们可以想象出来。

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

答案 5 :(得分：2)

使用两个反斜杠就可以了，这很有用。 但是如果你使用的是动态名称，我的意思是变量名称，你需要替换字符。

如果您不想更改变量名称，可以执行以下操作：

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

而不是你的jquery对象。

答案 6 :(得分：0)

只是附加信息： 请检查此ASP.NET MVC issue #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;
}

答案 7 :(得分：0)

我用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" );


}

注意：我删除＆＃34;＃＆＃34;因为在我的代码中我将ID与另一个文本连接起来

字体： Jquery Docs select element with especial chars

相关问题
最新问题