從一些jQuery修剪脂肪

Question

我寫了下面的jQuery，它完美地適用於我需要的東西。但我覺得它可以壓縮一點或縮短。我有點jQuery n00b很抱歉，如果它是明顯的...任何提示？謝謝！

jQuery(document).ready(function($){ 

var number = $("#tags-list a").length, 
    increment = 1/number, 
    opacity_num = ""; 

$($('#tags-list a').get().reverse()).each(function(i,el){ 
    el.id = i + 1; 
     opacity_num = el.id/number - increment; 
    $(this).css({ opacity: opacity_num }); 
     $(this).bind('mouseenter mouseleave', function() { 
      $(this).toggleClass('tag-hovering'); 
     }); 
}); 

}）;

note：jQuery(document).ready(function($)必須保持爲無衝突包裝。

Answer 1

這是我能想到的最徹底的方法。我拿出了相反的結果，因爲它很醜陋，只是交換了邏輯，所以不需要。

我也將jQuery(document).ready(function($) {更改爲jQuery(function($) {，因爲他們做同樣的事情，第二個更短。

jQuery(function($) { 
    var items = $('#tags-list a'), 
     number = items.length; 

    items 
    .attr('id', function(i){ 
     return number - i; 
    }) 
    .css('opacity', function(i) { 
     return 1 - ((i + 1)/number); 
    }) 
    .hover(function() { 
     $(this).toggleClass('tag-hovering'); 
    }) 
}); 

Answer 2

未經測試，但應清晰閱讀，速度會更快。據我所知，每次你做$（「＃tags-list a」）時，它都會進行查找（不管是否緩存）以及啓動一個函數。事情是，你可以保持引用，讓你直接與它最初提取的內容交互。當然，如果您爲＃tags-list添加另一個'a'元素，它將不會更新，但是當您多次調用相同的數據時，它會更快。另外，$ .each在IE中很慢......所以你可以通過將它放在'for'循環中來加快速度。

jQuery(document).ready(function($){ 

    var i, el, tagList = $("#tags-list a").get(); 
    var number = tagList.length, 
     increment = 1/number, 
     opacity_num = ""; 

    var mouseCallback = function() { 
     $(this).toggleClass('tag-hovering'); 
    } 
    for(i = tagList.length - 1; i>=0; i++) { 
     el = tagList[i]; 
     el.id = i + 1; 
     $(el).css({opacity: el.id/number - increment}).bind('mouseenter mouseleave', mouseCallback); 
    } 
}); 

附註。我很少關心代碼的實際長度 - 我一直比較關心它的可讀性和執行效果。我可以把整個JavaScript應用程序放在一行，但爲什麼打擾它，使它無法維護？如果您想由於加載時間而縮短代碼長度，請在使腳本生效之前通過最小化工具運行它。

Answer 3

jQuery(document).ready(function($){ 
    var number = $("#tags-list a").length; 

    $($('#tags-list a').get().reverse()).each(function(i,el){ 
     el.id = i + 1;  
     $(this).attr('id', i+1) 
       .css({ opacity: i/number})   
       .bind('mouseenter mouseleave', function() {   
        $(this).toggleClass('tag-hovering');   
       }); 
    }); 
}); 

我想我做了我的數學，並清理了不透明度計算。還刪除了額外的$（this）鑄件，只是做了一些鏈接

編輯需要設置el.Id = i + 1;

Answer 4

未經測試：

jQuery(document).ready(function($) { 
    var number = $("#tags-list a").length; 
    $($('#tags-list a').get().reverse()).each(function(i,el) { 
    $(this).attr('id', i+1) 
      .css({ opacity: i/number) }) 
      .bind('mouseenter mouseleave', function() { 
      $(this).toggleClass('tag-hovering'); 
      }); 
    }); 
});