Question

I’m adding some custom enhancements to a jQuery-UI tabbed widget. One of the things I’m trying to do is automating the text of a link in each tab panel by grabbing the value of the alt attribute of the image in its corresponding tab. The problem I’m experiencing is that it only works for the first tab, and the others return null values.

Here’s a link to the test page. (The code for running the tabs is not included because it’s not related to the problem.)

And here’s the section of the jQuery that’s giving me problems:

$('.imageTabs').find('.link').each(function() {
    $(this).find('a').each(function() {
        $(this).html($(this).parent('.link').parent('.ui-tabs-panel').prev('.ui-tabs-nav').children('li.' + $(this).parent('.link').parent('.ui-tabs-panel').attr('id')).children('a').children('img').attr('alt'));
    });
});

Answer 1

You are trying to do too much on one line IMO, and also should use jQuery’s builtin selectors instead of $.find() where possible.

Conveniently, you have the href of each tab set to #tab-1, which also works as a jQuery selector for your content areas. so… works?

$('.ui-tabs-nav a').each( function() { 
    var name = $(this).find('img').attr('alt'); 
    var ref = $(this).attr('href'); 
    $(ref).find('.link').text(name); 
});