Question

对于你在Stackoverflow中的jQuery大师来说，这是一个简单的。

我有以下jQuery函数，我想知道是否有一种优化代码的方法：

$('.dropdown li').click(function(){
    $(this).siblings().find('.active').removeClass('active')
    $(this).siblings().find('ul:visible').slideUp();        
    $(this).toggleClass('hover');
    $('ul:first',this).slideToggle();       
    $('.arrow-down',this).toggleClass('active');
 });

--------

快速提问：

('.selector' + this)和('.selector', this)之间有什么区别？我希望我打好这个。

你可以看到我对jQ很新，所以即使我在问愚蠢的问题，我也需要得到所有的帮助^ _ ^

提前致谢。

Answer 1

提示：

1 - 似乎您将事件处理程序附加到许多<li>元素。不要这样做，请改用delegate

2 - 无需一直执行$（this），只需执行var $this = $(this);并从现在开始使用$this。

3 - 如果你真的想加快速度（我没有看到任何大的性能问题BTW），请删除jQuery并使用普通的javascript。

Answer 2

“('.selector' + this)和('.selector', this)之间有什么区别？”

这将取决于this的价值。

如果您在处理程序中，那么this将成为调用处理程序的元素。就这样，这个：

('.selector' + this)

...几乎没用，因为你的选择器字符串看起来像：

".selector[object HTMLLIElement]"

...这不是有效的选择器。

但这个是不同的：

('.selector', this)

它使this（您的元素）成为您执行.selector查询的根。

实际上与：

相同

$(this).find('.selector');

...事实上，jQuery只是在幕后翻转到那个表单，所以你最好只使用.find()，因为它会更有效率，它的含义是IMO稍微清楚一点。

Answer 3

试试这个

$('.dropdown li').click(function(){
    $(this).toggleClass('hover').find('.active').removeClass('active')
    .end().find('ul:visible').slideUp();
    $('ul:first',this).slideToggle();       
    $('.arrow-down',this).toggleClass('active');
 });

优化代码以提高效率+快速提问

--------

3 个答案: