How to find elements by the last bit of their ID with jQuery?

Question

I have to find an element by its id with jQuery. This element has the id:

txtHistoricalPricesDate

which would be easy to find under normal circumstances with the following:

var element = $('#txtHistoricalPricesDate');

but unfortunately, I'm working in an ASP.NET app, which helpfully renamed the element to:

ctl00_ContentPlaceHolder1_ucFundSearchResultsPanel_tabContainer_tabPriceTab_txtHistoricalPricesDate

rather than dirty the jQuery with that huge ridiculous ID, is there a way that I can tell jQuery to find the element with an ID that ends with txtHistoricalPricesDate?

Answer 1

I would recommend you to use a class selector to avoid the ASP.NET id mangling. Simply append a CssClass to your element and then: $('.txtHistoricalPricesDate') or if you are using ASP.NET 4.0 you could adjust the ClientIDMode to Predictable.

Answer 2

Either use a class, or an attribute-ends-with selector, like this:

var element = $('[id$=txtHistoricalPricesDate]');

If you must use the above (but try and use a class) then prefix it with the element type, for example:

var element = $('input[id$=txtHistoricalPricesDate]');

To use a class, just set its CssClass property, for example CssClass="histPrices", then use a .class selector, like this:

var element = $('.histPrices');

On any normal element use class="", but since it's an ASP.Net control it looks like, use CssClass, as that's probably the WebControl property you're dealing with.