使用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);