へたれすぎてjQueryのDOM操作でハマる

jQueryを勉強中なんですが、よくあるタブUIを実現しようと思ったら、Clickイベントの$(this)をちゃんと使わないせいでハマりました。

$(this)を使わずに、タブを1個設置して「わーいできた」と思っていたら、2個目のタブを設置したときに、タブをクリックするたびに、触ってないもう一方のタブのclass="selected"がはずれて消えてしまうというへたれ。

No...

// 修正前
$(function(){
    $('.tabs').each(function(){
        $('ul.tab>li:nth-child(1)').children('a').addClass('selected');
        $('ul.panel>li:not(:nth-child(1))').hide();
        $('ul.tab li a').click(function(){
            $('ul.tab li a.selected').removeClass('selected');
            $(this).addClass('selected');
            $('ul.panel>li').hide();
            $($(this).attr('href')).show();
            return false;
        });
    });
});

// 修正後
$(function(){
    $('.tabs').each(function(){
        $('ul.tab>li:nth-child(1)').children('a').addClass('selected');
        $('ul.panel>li:not(:nth-child(1))').hide();
        $('ul.tab li a').click(function(){
            $(this).parents('ul').find('.selected').removeClass('selected');
            $(this).addClass('selected');
            $(this).parents('.tabs').find('ul.panel').children('li').hide();
            $($(this).attr('href')).show();
            return false;
        });
    });

});