437

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?

Improve this question
3
  • 17
    good old master page ID mangling!
    – Matthew Lock
    Commented Oct 27, 2011 at 7:16
  • 1
    Set ClientIDMode=static from ASP.Net 4.0 onwards and get rid of this :)
    – Murali Murugesan
    Commented Sep 27, 2013 at 13:30
  • 1
    ClientIDMode=static will not work for those trying to find an element in a repeater!
    – Stuart
    Commented Oct 31, 2014 at 15:58

9 Answers 9

Reset to default
693

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

Improve this answer
5
  • 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
    Commented Mar 20, 2009 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 : 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
    Commented Feb 13, 2011 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 <asp:Table ID="MyTable" ... by using $("id*=MyTable]"). Come to think of it, I like id$ better. Hmmm...
    – Lukas
    Commented Oct 9, 2013 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
    Commented Apr 26, 2014 at 10:16
  • Is there a way to use this selector with CSS, like pseudo-selectors?
    – alejnavab
    Commented Oct 31, 2016 at 21:22
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']")
Improve this answer
4
  • 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
    Commented Jan 17, 2013 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
    Commented Jan 17, 2013 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
    Commented Jan 18, 2013 at 10:25
  • 1
    @AlanMacdonald Done, you convinced me.
    – Romain Guidoux
    Commented Jan 18, 2013 at 13:53
35

Try

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

edit: 4 seconds late :P

Improve this answer
33 
$('element[id$=txtTitle]')

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

Improve this answer
1
  • 2
    This should be the right answer! Using " and ' is only confusing.
    – Kees C. Bakker
    Commented Oct 28, 2011 at 14:32
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).

Improve this answer
1
  • 1
    Yes you are right. ID property uses underscore. Name property uses dollar sign.
    – Josh Stodola
    Commented May 14, 2009 at 14:36
3

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

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

or

jQuery("a[id$='_edit']")
Improve this answer
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.

Improve this answer
1
  • 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
    Commented Oct 19, 2012 at 15:31
1

Try this:

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

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

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

                     }                   
                  });     
         });
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.