将 jQuery 限制为特定 DOM 节点的快捷方式答案

【问题标题】：Shortcut Limit jQuery to Specific DOM Node将 jQuery 限制为特定 DOM 节点的快捷方式
【发布时间】：2012-10-05 06:53:54
【问题描述】：

我想将 jQuery 限制为特定的命名空间或 DOM 节点。目前我所做的每一行都是这样的

$('a' , $node).addClass();
$('li' , $node).removeAttr();
$('div#q' , $node).hide();

等等.. 有没有我可以指定的快捷方式/方法，之后 jQuery 对象的范围将被限制为$node。

【问题讨论】：

jQuery 上下文选择器在内部使用find() 实现，因此自己显式调用find() 方法更有意义：$node.find('a').hide()（假设$ 前缀表示已经是一个 jQuery 对象，否则：$($node).find('a'))。

标签： javascript jquery dom namespaces

【解决方案1】：

您可以直接更改 $ 方法。

将 $ 分配给返回 $node.find() 的函数，你就完成了。

    jQuery(function($){
        var $node = $('div');
        var _$ = $;

        $ = function(selector){
            return $node.find(selector);
        };

        $('p:first').fadeOut();

        // Return $ to its previous owner
        $ = _$;
    });

jsfiddle：http://jsfiddle.net/pmYRw/1/

【讨论】：

正是我想要的谢谢！选择这个作为正确答案。也请在此处粘贴代码。
编辑了答案。还修复了 $node 会进入全局命名空间的问题

【解决方案2】：

$('a' , $node).addClass();
$('a' , $node).removeAttr();
$('a' , $node).hide();

而不是绑定 $('a' , $node) 几次，你可以缓存这个变量并像下面那样使用它。这也会提高你的表现。

var node  = $('a' , $node);
node.addClass();
node.removeAttr();
node.hide();

我们可以通过像下面这样链接它们来进一步改进这段代码

var node  = $('a' , $node);
node.addClass().removeAttr().hide();

重用变量和链接 jquery 将对您的代码产生巨大影响。

【讨论】：

【解决方案3】：

而不是 $node （我假设它是一个已经实例化的 jquery 对象），你可以把它写成一个字符串：

$('a', '#main') #≠> all anchor tags under element with main as id

$('a', '#main li') #≠> all anchor tags al li's under element with main as id

您也可以先实例化主元素，然后在其子范围内搜索：

var main = $('#main');
main.find('a');
main.find('li a');

这将更加高效。

【讨论】：

【解决方案4】：

您可以链接您的方法，这样您只需编写一次选择器：

$('a' , $node).addClass('aclass').removeAttr('rel').hide();

或者也将引用保存在变量中以便重复使用：

var a = $('a' , $node);
a.addClass('aclass');
a.removeAttr('rel');
a.hide();

【讨论】：