在 jquery 选择器路径中添加异常的最佳方法答案

【问题标题】：Best way to add exceptions in jquery selectors paths在 jquery 选择器路径中添加异常的最佳方法
【发布时间】：2012-03-03 06:36:27
【问题描述】：

假设我想绑定下面的所有项目

#mainDiv .user

除了

#mainDiv #exception .user

我能想到

$('#mainDiv .user').bind('event',function(){
    if($(this).parents('#exception').length>0){}else{
       // do stuff;   
    }

});

或：

$('#mainDiv :not('#exception').find('.user').bind('event',function(){
    if($(this).parents('#exception').length>0){}else{
       // do stuff;   
    }

});

有什么更好的？

【问题讨论】：

标签： jquery events css-selectors custom-exceptions

【解决方案1】：

我可能会建议类似的东西

$('#mainDiv .user').not('#mainDiv #exception .user').bind('event',function()
{
    //do stuff
});

not() 函数采用先前存在的 jquery 集并从其中删除符合作为参数传入的选择器的元素。

与同时使用选择器和 if 语句相比，预先过滤池更清洁且性能更高（可能无关紧要，但这是一种很好的做法），并且一旦过滤，就不需要 if 语句了。

作为旁注，过滤“#mainDiv #exception .user”对我来说似乎有点奇怪。 “#exception”应该是一个唯一标识符 - 除非您担心由于某种原因“#mainDiv”可能是“#exception”的子代。

【讨论】：

【解决方案2】：

首先获取所有元素，然后删除要排除的元素：

$('#mainDiv .user').not('#mainDiv #exception .user').bind('event', function(){
  // do stuff
});

【讨论】：

@ToniMichelCaubet，实际上是 2.. 不，但我只是在开玩笑 :)

【解决方案3】：

我会委托活动：

$( '#mainDiv' ).on( 'event', '.user', function () {

    if ( $( this ).parent().is( '#exception' ) ) { return; }

    // do your thing

});

您也可以进行this.parentNode.id === 'exception' 支票...

【讨论】：

但这与 mi 第一个选项的选择相同，但触发方式不同......不是吗？
@ToniMichelCaubet 我委托事件，这比将处理程序绑定到所有元素要好...
@ŠimeVidas：这取决于。这并不总是更好，因为委托比简单的绑定有更多的运行时开销。
@Guffa 我的意思是更好，更恰当。当您有同一个类的多个元素共享同一个事件处理程序时，将处理程序 once 绑定到父/祖先上然后单独绑定到每个元素上更合适。