使用jQuery「本」與「選擇」

Question

我得到了jQuery的加快和woudl想知道我怎麼能寫出下面的代碼，以便它更幹，使用$（本）

//Update Background Color 
(function($) { 
    //Find Background Colour 
    var curColor = $('ul.product-categories li.current-item a').css('color'); 

    if($('ul.product-categories li').hasClass('current-item')) { 
     //trying to use 'this' below but does not work 
     //$(this).children('a').css({ 

     //This does work 
     $('ul.product-categories li.current-item a').css({ 
      'background-color': curColor, 
      'color': '#fff' 
     }); 
    } else { 
     $('ul.product-categories li.cat-item-11 a').css({ 
      'background-color': '#dd3c85', 
      'color': '#fff' 
     }); 
    }; 
})(jQuery); 

位

關於如何改進的任何建議。我知道這可能是一些簡單的...

感謝

Answer 1

繼承人的你應該如何存儲到項目的引用，所以你不要有反覆使用jQuery選擇，以保持一個例子。

還要注意它是一個好主意，把一個「$」在引用一個jQuery對象，而不是正常的變量變量開始，可以更容易地看到哪些是它的其中

//Update Background Color 
(function($) { 

    //save a reference to the item 
    var $item = $('ul.product-categories li.current-item a'); 

    //Find Background Colour 
    var curColor = $item.css('color'); 

    if($item.hasClass('current-item')) { 
     $item.css({ 
      'background-color': curColor, 
      'color': '#fff' 
     }); 
    } else { 
     $item.css({ 
      'background-color': '#dd3c85', 
      'color': '#fff' 
     }); 
    }; 
})(jQuery); 

Answer 2

更好'緩存'DOM查詢，以提高性能。

//Update Background Color 
(function($) { 
    //Find Background Colour 
    var $categories = $('ul.product-categories'); 
    var $curr = $categories.find('li.current-item a'); 

    if(!$.isEmptyObject($curr)) { 
     $curr.css({ 
      'background-color': $curr.css('color'), 
      'color': '#fff' 
     }); 
    } else { 
     $categories.find('li.cat-item-11 a').css({ 
      'background-color': '#dd3c85', 
      'color': '#fff' 
     }); 
    } 
})(jQuery);