jQuery重构

Question

I often spend 10-20 minutes looking at pieces of jQuery to find a way of shortening the code that's there.

Now this piece of code I've been looking at time and time again but just want to know how people would go about refactoring it or if indeed they would.

$("#tabs ul li").first().addClass("activeTab");
$("#tabs div").hide().first().show();
$("#tabs ul li a").click(function(){
    $("#tabs div").hide();
    $("#tabs").find($(this).attr('href')).show();
});

This is more a question of curiosity that a cry for help as I'm trying to better my coding skills in jQuery.

/* EDIT

Link attached jsFiddle

End Result from all your fabulous suggestions is.

var $c = $("#tabs"), $t = $c.find("li"), $d = $c.find("div");
$d.not(":first").hide();
$t.find("a").click(function() {
    $d.hide().filter($(this).attr('href')).show();
}).closest("li").first().addClass("activeTab");

Answer 1

I would refactor this as follows. There is no need to make jQuery object each time, make a reference to it for future use.

    var $tabs = $("#tabs");

    $tabs.find("li:first").addClass("activeTab");
    $tabs.find('div').not(':first').hide();
    $tabs.find("a").click(function() {
        $("#tabs div").hide().filter($(this).attr('href')).show();
    })

Answer 2

I would refactor the selectors, so traversing the Dom would be less costly. It would be something like:

var $tabsControl = $("#tabs"),
    $tabs = $tabsControl.find("ul > li"),
    $tabsContent = $tabsControl.find("div");

$tabs.first().addClass("activeTab");
$tabsContent.hide().first().show();
$tabs.find("a").click(function() {
    $tabsContent.hide();
    $tabsControl.find($(this).attr("href")).show();
});

Answer 3

I personally think this code is OK, but would refactor $("#tabs div").hide().first().show(); just to make it more readable, maybe:

$("#tabs div").not(":first").hide();