jQuery - innerText starts with selector broken in

Question

Just upgraded from jQuery 1.3.2 to 1.8.2 and found that several functions that worked in 1.3.2 no longer work. Most of these I've fixed, but stuck on this one:

I need to search based on the first few characters within a table cell (a "starts-with" search), but this code no longer works in recent versions of jQuery:

var matchingElements = $("#tblSelect1>tbody>tr>td:first-child[innerText^='" + text + "']");

I suspect it has something to do with the fact that several things that used to work like attributes are now properties instead - innerText is a property (I think) and so maybe it is not compatible with the attribute starts-with selector notation: [attr^='value']

I do not want to use :contains because I only want the elements whose innerText starts with the search text

Thoughts? Thanks!

Answer 1

You can use filter method. innerText is a non-standard property and doesn't works on Firefox, for supporting all the main browsers you should check both the properties, or use jQuery text method which is cross-browser.

var $matchingElements = $("#tblSelect1 > tbody > tr > td").filter(function(){
      var c = this.textContent || this.innerText;
      return c.indexOf(text) === 0
});