javascript - jQueryを特定のDOMノードにショートカット制限する

Question

jQueryを特定の名前空間またはDOMノードに制限したい。現在、私がしていることは、すべての行でこれが好きなことです

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

など..jQueryオブジェクトのスコープがに制限される後に指定できるショートカット/メソッドはありますか$node？

Answer 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/

Answer 2

メソッドを連鎖させることができます。そうすれば、セレクターを1回だけ記述できます。

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

または、参照を再利用するために変数に保存します。

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

Answer 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');

これにより、パフォーマンスが大幅に向上します。

Answer 4

$('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をチェーンすると、コードに大きな影響を与えます。