Нужно оптимизировать функции jQuery

Question

1 комплект:

$('#tabs li:first-child').addClass('first-child');
$('.photos li:first-child').addClass('first-child');
$('#alphabet li:first-child').addClass('first-child');

2 комплекта:

$(function(){
    $("#header-thumbs img").fadeTo("fast",1);
    $("#header-thumbs img").hover(function(){
        $(this).fadeTo("fast",.7)},function(){
        $(this).fadeTo("fast",1)})});
$(function(){$(".catalog dt img").fadeTo("fast",1);
    $(".catalog dt img").hover(function(){
        $(this).fadeTo("fast",.7)},function(){
        $(this).fadeTo("fast",1)})});
$(function(){$(".photos li img").fadeTo("fast",1);
    $(".photos li img").hover(function(){
    $(this).fadeTo("fast",.7)},function(){
    $(this).fadeTo("fast",1)})});

Можно ли оптимизировать для меньшего кода?

---

Спасибо Паоло Бергантино за помощь, результат:

Оптимизированный и упакованный первый набор (540-> 171):

$(function(){$("#header-thumbs, .catalog dt, .photos li").find("img").fadeTo("fast",1).hover(function(){$(this).fadeTo("fast",.7)},function(){$(this).fadeTo("fast",1)})});

второй набор (158-> 78):

$('#tabs, .photos, #alphabet').find('li:first-child').addClass('first-child');

Используется Дин Эдвардс Упаковщик

Answer 1

При работе с наборами элементов и CSS / Javascript принято давать всем им одинаковый класс, если это вообще возможно, чтобы с ними было легче работать. Тогда вы можете просто сделать это:

$('.mysimilarclass li:first-child').addClass('first-child');

Если это не вариант, вы также можете просто объединить все селекторы в один:

$('#tabs, .photos, #alphabet').find('li:first-child').addClass('first-child');

Для второго сета применимо то же самое. Вы можете «сгруппировать» их всех по одному классу или просто собрать все нужные селекторы, а затем только находить изображения из них. Кроме того, вы можете воспользоваться расширением цепочки jQuery, чтобы не запрашивать DOM более одного раза:

$(function(){
    $("#header-thumbs, .catalog dt, .photos li")
     .find("img")
     .fadeTo("fast", 1)
     .hover(function() {
         $(this).fadeTo("fast", .7);
     }, function() {
         $(this).fadeTo("fast", 1);
     });
});

Также, если это вообще возможно, рекомендуется всегда добавлять, какой элемент должен иметь класс в ваших селекторах. Поэтому вместо .photos li лучше сделать ul.photos li или любой другой элемент будет иметь класс photos. Конечно, это не всегда возможно, но желательно, когда бы это ни было.