jQuery Finding the right tab with a class

Question

Here is my issue, I have jquery UI, I also have an error that occurs within a tab, but I want my customers to find the error without having to look through every tab. What my code should do, is if the validationerror is visible, it will look for the closest LI with the class tabs-panel, then find the ID attached to that li tabs-1 etc. Then place that next to the Href it corresponds to because I found out which div the error exists in. Yes crazy. The appendTo adds a exclamation mark at the end of the URL so I know that this is the problem tab, I will add a message later once i can do this Im good as gold. Thanks!

$(document).ready(function(){
 var finderror = $('.validationError:visible').closest('div[class^="ui-tabs-panel"]').attr('id');
    if($('.validationError').is(':visible')) {
        $('li a[@href*=' + finderror + ']').appendTo('!');
    };

 });

Answer 1

It may be that the ui-tabs-panel class isn't the first part of the class attribute's value. I think that selector is too specific IMO, and I would change it to:

closest('div.ui-tabs-panel')

As an aside, you should use prop, not attr.

Hope this helps.

P.S. And Floremin is correct, it should be Append, not AppendTo.

Further edit: you may have multiple validation errors, so you actually need to do an each on them, like so:

$(document).ready(function(){
    $('.validationError:visible').each(function(i, e) {
        var finderror = $(e).closest('div.ui-tabs-panel').prop('id');
        $('li a[@href*=' + finderror + ']').removeClass("validationError").addClass("validationError");
    });
});

Instead of the exclamation, I would do it with a class.

---

The working code!

    $('.validationError:visible').each(function(i, e) {
         var finderror = $(e).closest('div#tabs > div').prop('id');
    var errorInf = $('li a[href=#' + finderror + ']');
       $(errorInf).append('<span style="color: red; padding: 2px; font-size: 16px;">!</span>');
    });
});