jQueryセレクター:Idで終わる?


393

selector特定の文字列で終わるIDを持つ要素をクエリできるものはありますか?

IDがの要素があるとしctl00$ContentBody$txtTitleます。ただ渡すだけでこれをどのように取得できtxtTitleますか?


16
古き良きマスターページIDマングリング!
マシューロック

1
ClientIDMode=staticASP.Net 4.0以降から設定し、これを
削除し

1
ClientIDMode = staticは、リピーターで要素を見つけようとするユーザーには機能しません。
スチュアート

回答:


629

要素のタイプがわかっている場合:(例: 'element'を 'div'に置き換えます)

$("element[id$='txtTitle']")

要素タイプがわからない場合:

$("[id$='txtTitle']")

利用可能な詳細情報



10
「$ txtTitle」で終わるものを探します。など、「それはTXT 'プレフィックスとリスクの限りではありませんが、「NameTextBoxは」あなたセレクタであれば、それはNameTextBox'、「FirstNameTextBox」と一致し、LastNameTextBox
マーク・

11
匿名ユーザーが次の内容を編集しようとしました。コメントとして追加します(意味があるようです)。ここにドキュメントがあります:api.jquery.com/element-selector ..elementセレクターはgetElementsByTagNameと同等です。要素のidとは何の関係もありません。idで終わる要素にアクセスする場合は、この構文$( "[id $ = 'txtTitle']")を使用するか、要素のタイプがわかっている場合は..eg div ..その後、この構文$( "div [id $ = 'txtTitle'] ")
Pekka

1
リンクはとても役に立ちました。それ自体のページではなく、私が必要とする追加の2ページに分かれました。タイトルのセグメントをキャプチャする方法を学びました。たとえば、IDが[ソースの表示]で "masterPage1_Control0_MyTableName_moreStuff"と表示されている場合、$( "id *を使用して<asp:Table ID =" MyTable "... = MyTable] ")。考えてみると、id $の方が好きです。うーん...
Lukas

これは要素を見つけますdocument.getElementById("f:fTest:j_idt51:0:inpTest")。これはしません$("[id$='inpTest']")。コロンはIDで許可されていないためですか(しかしJSFはそれを追加します!)?
Panu Haaramo 2014

疑似セレクタのように、CSSでこのセレクタを使用する方法はありますか?
Alejandro Nava

250

質問への答えは$("[id$='txtTitle']")マーク・ハードが答えたようにですが、私のように、特定の文字列(たとえば、txtTitle)で始まる IDを持つすべての要素を検索したい場合は、これを試してください(doc):

$("[id^='txtTitle']")

id 特定の文字列(doc)を含む要素を選択する場合:

$("[id*='txtTitle']")

与えられた文字列(doc)ではない要素を選択したい場合:

$("[id!='myValue']")

(指定された属性を持たない要素にも一致します)

スペースで区切られた特定の単語を含む要素を選択する場合は、doc):

$("[id~='myValue']")

idが特定の文字列等しいか、その文字列で始まりハイフンdoc)が続く要素を選択する場合:

$("[id|='myValue']")

質問に実際に答えるもの、つまり$( "[id $ = 'txtTitle']")を追加し、それをリストの最初に置くと、私はあなたの答えに投票します。あなたが質問に答えないので、私は現時点ではできません
アランマクドナルド

2
@AlanMacdonaldそれを追加するのが正しいかどうかはわかりません。訪問者に情報を追加するためだけに、回答が受け入れられてからしばらくしてから質問に回答しました。私の回答に賛成する人が質問への回答にも賛成することを願っています。
Romain Guidoux 2013年

1
@RomainGuidouxは十分に公平ですが、OPと同じ問題が発生している初心者がページに来てアップがある場合、OPと同じ問題を経験している初心者には明らかではないため、質問に対する解決策を提供しない回答には賛成しません。質問に答えることさえしない投票された答え。質問に答えるように変更した場合、それはより充実した、より有用な答えであるため、受け入れられた答えの代わりにあなたの答えを賛成します。それまたはそれは、質問への回答ではなく、受け入れられた回答に関するコメントである必要があります。
アランマクドナルド2013年

1
@AlanMacdonald完了、あなたは私を確信しました。
Romain Guidoux 2013年

33

試す

$("element[id$='txtTitle']");

編集:4秒遅れ:P



13

同じIDで終わる他の要素と一致する可能性が低くなるように、検索する用語にアンダースコアまたは$を追加する方が安全です。

$("element[id$=_txtTitle]")

ここで、(要素が要素の型である、あなたは見つけるためにしようとしている-例えばdivinputなど

(IDには$記号が含まれる傾向があることをお勧めしますが、.NET 2ではIDにアンダースコアを使用する傾向があるため、私の例ではアンダースコアを使用しています)。


1
はい、そうです。IDプロパティはアンダースコアを使用します。Nameプロパティはドル記号を使用します。
Josh Stodola、

3

例:<a>IDが_editで終わるすべてのを選択するには:

jQuery("a[id$=_edit]")

または

jQuery("a[id$='_edit']")

3

これはASP.NETであるため、ASP <%=%>タグを使用して、生成されたtxtTitleのClientIDを出力できます。

$('<%= txtTitle.ClientID %>')

これは...

$('ctl00$ContentBody$txtTitle')

...ページがレンダリングされるとき。

注:Visual Studioでは、IntellisenseはASPタグをJavaScriptに配置することに対して怒鳴りつけます。結果は有効なJavaScriptであるため、これを無視できます。


4
OPにはがなく'ctl00$ContentBody$txtTitle'、彼には'txtTitle'あり#、IDに一致するためのリードがありません。しかし、OPは既に同様の提案を拒否しています(削除されたため)。これは、私がJavaScriptをマークアップに直接配置しない限り機能しません。これは、組織の悪夢です。行動の分離は、このプロジェクトにとって重要です。
Martijn Pieters

1

これを試して:

<asp:HiddenField ID="0858674_h" Value="0" runat="server" />

var test = $(this).find('[id*="_h"').val();

0

多くのiframeを含むページ内で「iFrame」で終わるiframe IDを見つけるため。

jQuery(document).ready(function (){     
                  jQuery("iframe").each(function(){                     
                    if( jQuery(this).attr('id').match(/_iFrame/) ) {
                            alert(jQuery(this).attr('id'));

                     }                   
                  });     
         });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.