web-dev-qa-db-ja.com

でjQueryを取得して要素を選択するにはどうすればよいですか？ （ピリオド）ID

次のクラスとコントローラーアクションメソッドがあるとします。

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);
    });
  });
});
javascriptjqueryjquery-selectors
170
Doug Wilson

から Googleグループ ：

各特殊文字の前に2つのバックスラッシュを使用します。

JQueryセレクターのバックスラッシュは、次の文字をエスケープします。ただし、バックスラッシュはJavaScript文字列のエスケープ文字でもあるため、2つ必要です。最初のバックスラッシュは2番目のバックスラッシュをエスケープし、文字列内に実際のバックスラッシュを1つ与えます。これにより、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をご覧ください。

285
bdukes

IDにスペースが含まれている場合は、jQuery IDセレクターを使用できません。属性セレクターを使用します。

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

可能であれば、要素タイプも指定します。

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

Jqueryでエスケープします。

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

使用例：

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

詳細 こちら 。

11
user669677

リリースされたばかりのASP.NET MVCのリリース候補はこの問題を修正し、ID属性のドットをアンダースコアに置き換えました。

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

にレンダリング

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

詳細については、14ページ以降のリリースノートを参照してください。

9
Dale Ragan

これは jQuery Selectors docs で文書化されています：

メタ文字（!"#$%&'()*+,./:;<=>?@[\]^`{|}~など）を名前のリテラル部分として使用するには、2つのバックスラッシュ\\でエスケープする必要があります。たとえば、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"を解釈するとき、\が表示され、次の文字を文字通りに取ると解釈しますおよびremove$()への引数として文字列が渡されたときにそれを削除します。つまり、jQueryは引き続き文字列を"#Address.Country"として認識します。

そこで、2番目の\が登場します。最初の文字は、2番目の文字をリテラル（非特殊）文字として解釈するようJavaScriptに指示します。これは、2番目がjQueryによって認識され、次の.文字がリテラル文字であることを理解することを意味します。

ふう！それを視覚化できるかもしれません。

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

2つのバックスラッシュを使用しても問題ありません。動作します。ただし、動的な名前、つまり変数名を使用している場合は、文字を置き換える必要があります。

変数名を変更したくない場合、これを行うことができます：

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

そして、あなたはあなたのjqueryオブジェクトを持っています。

2
Daniel

追加情報：これを確認してください ASP.NET MVC issue＃24 。

問題が修正されるまで、Html.TextBoxFixedなどの独自の拡張メソッドを使用します。これは、id属性（名前属性ではなく）でドットをアンダースコアに置き換えるだけなので、$（ "＃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;
}
0
gius

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は特別な文字を含む要素を選択します

0
Gabriel Molina