每个函数 jquery。这是正确的吗？答案

【问题标题】：each function jquery. is it correct?每个函数 jquery。这是正确的吗？
【发布时间】：2011-03-12 00:06:10
【问题描述】：

 $('.dragbox').each(function(){
        $('.close').click(function(){
            $(this).parent().hide();
        }),
        $('.colpase').click(function(){
            $(this).siblings('.dragbox_content').toggle();
        })
     });

【问题讨论】：

标签： jquery each foreach

【解决方案1】：

考虑到 jquery 作为一个包装集（集合）工作，我认为您不需要每个方法，只需要

$('.dragbox').find('.close').click(function(){
    $(this).parent().hide();
})
$('.dragbox').find('.colpase').click(function(){
    $(this).siblings('.dragbox_content').toggle();
})

处理程序将应用于所有匹配的元素，而不需要每个。

这将在 .dragbox 项目中找到所有 .close 和 .colpase 我认为这就是您所追求的...

编辑以使用 find 以获得轻微的性能改进。谢谢丹/亚历克斯。

【讨论】：

为了便于阅读，$('.dragbox').find('.close').click(.. 可能更容易。（根据我的阅读，虽然我手头没有文章，但 touch 更快）
@Dan Heberden - Brandon Aaron 在这里解释了 JQ 中的上下文：brandonaaron.net/blog/2009/06/24/…（我不知道 1.4 是否有显着变化）。
好吧，如果担心性能问题，您将希望重用 $('.dragbox') 而不是查找两次。
好吧，我并没有太挑剔，尽管 div.dragbox 是您可以使用类名获得的最好的 - 尽管使用最近的 id 也有一点帮助。即$('#mainSection div.dragbox') - 更多 - 所以这是可读性方面 - 从左到右有点东西。 @Alex - 它在 1.4 中发生了变化 - 我想我在 hawtness 或 yayquery 的 14 天里看到/听到了它。但我什至不知道这是否是你真正注意到速度方面的事情，除非你做了数百次发现。是的，如果您要重复使用它们，请始终缓存您的 jQuery 选择。

【解决方案2】：

没有。大概您想将点击处理程序应用于每个拖动框中的匹配元素。你可以这样做：

 $('.dragbox').each(function(){
        $('.close', this).click(function(){
            $(this).parent().hide();
        }),
        $('.colpase', this).click(function(){
            $(this).siblings('.dragbox_content').toggle();
        })
     });

如果您只想全局添加处理程序，则不需要每个处理程序。

【讨论】：

【解决方案3】：

看起来好像不需要 each() 函数。您可能会多次将事件处理程序应用于对象。只是：

    $('.close').click(function(){
        $(this).parent().hide();
    });
    $('.colpase').click(function(){
        $(this).siblings('.dragbox_content').toggle();
    });

应该做的伎俩。

【讨论】：

假设我需要关闭四个盒子。这就是我使用每个功能的原因。如果不是，我们如何判断页面中所有关闭链接的关闭情况
当你说 $('.close') 时，你实际上得到了一个包含类“close”的所有元素的集合。因此，这样做一次将适用于尽可能多的关闭框。

【解决方案4】：

如果您在“每个”中将“父级”称为实际的“.dragbox”

$('.dragbox').each(function(){

  var self = this;

  $(self).find('.close').bind("click", function(){

    $(self).hide();

  }); // <-- ","?

  $(self).find('.colpase').bind("click", function(){

    //This line confuses me because you could do the same in the selector for the click event
    //unless you do have more things in the function
    $(this).siblings('.dragbox_content').toggle();

  });

  /*
  $(self).find('.colpase').siblings('.dragbox_content').bind("click", function(){
    $(this).toggle();
  });
  */

});

【讨论】：

【解决方案5】：

function set_colors(pick_color)
{
    var color_code=pick_color;
    $('#'+ color_owner).parent().css('background-color',color_code);
}

【讨论】：