Jquery css selector using regular expressions

Question

I have a DYNAMICALLY generated Navigation div

<div id="WebPartWPQ9" >
 <table class="xm-ptabarea">
  <tbody>
   <tr>
    <td nowrap="" class="tab"><a href="/somelink.aspx">Overview</a></td>
    <td nowrap="" class="tab"><a href="/anothersomelink.aspx">Financials</a></td>
    <td nowrap="" class="tab"><a href="/somemorelink.aspx">Newsfeed</a></td>
   </tr>
  </tbody>
 </table>
</div>

Since there are no unique IDs, using jquery, i want to be able to attach an event to the "financial" tab link (using regular expressions selectors maybe?)

The value of the link will always be "Financials"

Answer 1

It's super easy to select that <a> element using the :contains selector:

var $financialsLink = $('#WebPartWPQ9').find('td.tab > a:contains(Financials)');

Answer 2

$('#WebPartWPQ9 a:contains(Financials)')

Answer 3

Because it is dynamically generated, you can use .live() to handle events on elements created after the DOM loads.

$('#WebPartWPQ9 td.tab a:contains(Financials)').live('click', function() {
    // run code
});

Or if the #WebPartWPQ9 is present when the page loads, I'd probably use .delegate() instead.

$('#WebPartWPQ9').delegate('td.tab a:contains(Financials)', 'click', function() {
    // run code
});

Both of these use the :contains selector to target the one with "Financials".

Answer 4

You can use the :contains filter selector and live method like this:

$('.tab a:contains("Financials")').live('click', function(){
  // your code...
});