jQuery selector question

Question

I have a span and an anchor inside a table cell. I have the anchor set up to show a tooltip. I would like the text inside the span to be used for the tooltip. How can I select this text in jQuery?

  <td class="row-head" colspan="5"><span class="tip-text">Complete Coverage</span><a href="#" class="help"></a></td>

JQuery code - the current selector always finds the first instance only for all tips.

$(document).ready(function() {
  $('.help').qtip({ style: { name: 'cream', tip: true },
                 content: {
                 text: $(this).find('span.tip-text').html() 
   } });
});

Thanks

Answer 1

I will confess to having not tested this (yet), but this should fetch the span contents, you can iterate this for each row in your table.

$('a.help').siblings('.tip-text').text();

Answer 2

$(document).ready(function() {
    $('.help').qtip({ 
        style: { name: 'cream', tip: true }, 
        content: { text: $(this).parent().find('span.tip-text').text(); }
        }); 
});

Although I would just suggest using the anchor's title attribute like so

<a href="#" class="help" title='Complete Coverage'></a>

and qtip will automatically use that as the tooltip

Answer 3

$(this).parent().find('span.tip-text'); Find just looks for descendants of the selected element, I think.

http://api.jquery.com/find/

Answer 4

The problem is your use of this. I recently ran into the same thing where I assumed that $('some-selector').whatever() implied a loop over all matching objects.

In fact, it doesn't. this is not referring to the current element with a class of help.

If you really need to do something based on the current matching element, you need to use the each() function like this:

$('.help').each( function(idx) {
    $(this).qtip({ 
        style: { name: 'cream', tip: true },
        content: { text: $(this).find('span.tip-text').html() } 
    });
});

Answer 5

Your problem is that $(this) is being evaluated in the document ready functions context, you can use the .each() function to iterate over each .help. The function you are looking for to find the .tip-text could easily be .prevAll() or .siblings().

$(document).ready(function() {
  $('.help').each(function() {
     // iterate over each .help, find its span.tip-text and create the qtip
     $(this).qtip({ 
       style: { name: 'cream', tip: true },
       content: {
         text: $(this).siblings('span.tip-text').html() 
       } 
     });
  });
});