jQuery Selector: Id Ends With?

Question

Is there a selector that I can query for elements with an ID that ends with a given string?

Say I have a element with an id of ctl00$ContentBody$txtTitle. How can I get this by passing just txtTitle?

Set `ClientIDMode=static` from ASP.Net 4.0 onwards and get rid of this :) — Murali Murugesan, Sep 27 '13 at 13:30
ClientIDMode=static will not work for those trying to find an element in a repeater! — Stuart, Oct 31 '14 at 15:58

score 690 · Accepted Answer · edited Dec 06 '18 at 09:48

690

If you know the element type then: (eg: replace 'element' with 'div')

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

If you don't know the element type:

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

More information available

// the old way, needs exact ID: document.getElementById("hi").value = "kk";
$(function() {
  $("[id$='txtTitle']").val("zz");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ctl_blabla_txtTitle" type="text" />

edited Dec 06 '18 at 09:48

Mohammad

21,175
15
55
84

answered Mar 04 '09 at 06:06

Mark Hurd

13,010
2
27
28

10

I would look for it ending with '$txtTitle'. It isn't as much of a risk with the 'txt' prefix, but if you selector is 'NameTextBox', it would match 'NameTextBox', 'FirstNameTextBox', LastNameTextBox', etc. – Mark Mar 20 '09 at 14:57
11

An anonymous user just tried to edit the following in. Adding it as a comment (as it seems to make sense): This does not give the elements ending with id txtTitle. Here is docs : http://api.jquery.com/element-selector/ ..element selector is equivalent of getElementsByTagName. It has got nothing to do with the id of the element. If you want to access elements ending with id, then use this syntax $("[id$='txtTitle']") or if you know the type of the element ..e.g. div ..then use this syntax $("div[id$='txtTitle']") – Pekka Feb 13 '11 at 16:06
1

Link was very useful. Not the page it self, but it spun off into 2 additional pages, which I needed. I learned how to capture segments of a title, such as if ID appeard as "masterPage1_Control0_MyTableName_moreStuff" in View Source, I could lock onto the my table of – Lukas Oct 09 '13 at 15:55
This finds the element `document.getElementById("f:fTest:j_idt51:0:inpTest")`. This does not `$("[id$='inpTest']")`. Is it because colon is not allowed in ID (but JSF adds it!)? – Panu Haaramo Apr 26 '14 at 10:16
Is there a way to use this selector with CSS, like pseudo-selectors? – alejnavab Oct 31 '16 at 21:22

score 267 · Answer 2 · edited May 23 '17 at 12:26

267

The answer to the question is $("[id$='txtTitle']"), as Mark Hurd answered, but for those who, like me, want to find all the elements with an id which starts with a given string (for example txtTitle), try this (doc) :

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

If you want to select elements which id contains a given string (doc) :

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

If you want to select elements which id is not a given string (doc) :

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

(it also matches the elements that don't have the specified attribute)

If you want to select elements which id contains a given word, delimited by spaces (doc) :

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

If you want to select elements which id is equal to a given string or starting with that string followed by a hyphen (doc) :

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

edited May 23 '17 at 12:26

Community

1
1

answered May 03 '11 at 07:15

Romain Guidoux

2,943
4
28
48

If you add in the one that actually answers the question i.e. $("[id$='txtTitle']") and put it first in the list I'd up vote your answer. I can't at the moment because you don't answer the question – Alan Macdonald Jan 17 '13 at 16:58
3

@AlanMacdonald I'm not sure it is right to add it. I answered the question a long time after an answer was accepted, just in order to add more information for visitors. I hope that people who upvote my answer also upvote the answer to the question. – Romain Guidoux Jan 17 '13 at 18:47
1

@RomainGuidoux fair enough it's your call, but I don't upvote answers that don't offer a solution to the question asked because it's not obvious for newbies experiencing the same problem as the OP if they come to the page and there is an up voted answer that doesn't even answer the question. If you changed it to answer the question I would upvote your answer instead of the accepted answer as it is a fuller and more useful answer. Ether that or it should have been a comment on the accepted answer rather than an answer to the question. – Alan Macdonald Jan 18 '13 at 10:25
1

@AlanMacdonald Done, you convinced me. – Romain Guidoux Jan 18 '13 at 13:53

score 35 · Answer 3 · answered Mar 04 '09 at 06:06

35

Try

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

edit: 4 seconds late :P

answered Mar 04 '09 at 06:06

kkyy

12,214
3
32
27

score 33 · Answer 4 · answered Mar 20 '09 at 14:50

33

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

It's not strictly necessary to quote the text fragment you are matching against

answered Mar 20 '09 at 14:50

Scott Evernden

39,136
15
78
84

2

This should be the right answer! Using " and ' is only confusing. – Kees C. Bakker Oct 28 '11 at 14:32

score 14 · Answer 5 · edited Jul 29 '13 at 16:01

14

It's safer to add the underscore or $ to the term you're searching for so it's less likely to match other elements which end in the same ID:

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

(where element is the type of element you're trying to find - eg div, input etc.

(Note, you're suggesting your IDs tend to have $ signs in them, but I think .NET 2 now tends to use underscores in the ID instead, so my example uses an underscore).

edited Jul 29 '13 at 16:01

madth3

7,275
12
50
74

answered May 14 '09 at 08:29

Nick Gilbert

141
1
2

1

Yes you are right. ID property uses underscore. Name property uses dollar sign. – Josh Stodola May 14 '09 at 14:36

score 3 · Answer 6 · answered Oct 19 '12 at 15:27

3

Since this is ASP.NET, you can simply use the ASP <%= %> tag to print the generated ClientID of txtTitle:

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

This will result in...

$('ctl00$ContentBody$txtTitle')

... when the page is rendered.

Note: In Visual Studio, Intellisense will yell at you for putting ASP tags in JavaScript. You can ignore this as the result is valid JavaScript.

answered Oct 19 '12 at 15:27

Michael

37
7

4

The OP doesn't have `'ctl00$ContentBody$txtTitle'`, he has `'txtTitle'`, *and* you are missing the leading `#` to match an id. But the OP has already rejected a similar suggestion (since deleted): *This won't work unless I put my Javascript directly in the markup, which is an organizational nightmare. Behavioral separation is crucial to this project.* – Martijn Pieters Oct 19 '12 at 15:31

score 3 · Answer 7 · answered Jul 22 '10 at 08:24

3

An example: to select all <a>s with ID ending in _edit:

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

or

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

answered Jul 22 '10 at 08:24

Anton Kraievyi

4,182
4
26
41

score 1 · Answer 8 · edited May 09 '12 at 11:46

1

Try this:

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

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

edited May 09 '12 at 11:46

Raul Rene

10,014
9
53
75

answered May 09 '12 at 09:16

pawel

11
1

score 0 · Answer 9 · answered Dec 06 '11 at 20:32

In order to find an iframe id ending with "iFrame" within a page containing many iframes.

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

                     }                   
                  });     
         });

jQuery Selector: Id Ends With?

9 Answers9

Linked

Related