jQueryに、私が書いたセレクタはすべて、作業対象のオブジェクトに限定するべきですか？

Question

は、私は世界http://jsfiddle.net/4phfC/1/の運命を変更します。この信じられないほどのプラグインを作っ：

私は、プラグインを添付オブジェクト内にあるクラス「バー」とだけspanタグを行うために

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

<script>  

$.fn.colorText = function(color) { 

    $('.bar', $(this)).css('color', color); 

    // a million other lines of code here... 

} 

$(function() { 

    $("#div1").colorText("red"); 

}); 

</script> 

<div id="div1" class="foo" style="width:100px;height:100px;border:1px solid green"> 
    <span class="bar">Hello</span> 
</div> 

<div id="div2" class="foo" style="width:100px;height:100px;border:1px solid green"> 
    <span class="bar">Good Bye</span> 
</div> 

私はページ上ではない他の1：

$('.bar', $(this)).whatever(); 

しかし、行くコードの万の他の行は、それはプラグインの残りの部分で、この規則を使用するには、痛みのsomehwatだろうスポットに気づきます。

私は通常のようなセレクタを使用できるように、唯一のプラグインが接続されていることを要素に適用され、私は宣言するすべてのセレクタで、今からのjQueryを伝えるためにどのような方法があります：

$('.bar').whatever(); 

と、このウォン」作業中の要素の外側にある ".bar"に影響を与えません。

Answer 1

を私はに関するコメントのすべてに同意しますセレクタをキャッシュしていますが、あなたが記述しているようなことをやりたければ、その機能をいつも別の関数にカプセル化することができます。一度結果をキャッシュすると間違って何

$.fn.colorText = function(color) { 
    var that = this; 

    function selectInScope(selector) { 
     return $(selector,that); 
    } 

    selectInScope('.bar').css('color', color); 

    // a million other lines of code here... 

} 

Answer 2

いいえ、私が知っていないことが、あなたはこれを行うことができます：

$(this).find('.bar') 

あなたが本当にしたい場合、あなたはこのような何か行うことができます：

!function($) { 
    function jqScoped(scope) { 
     return function() { 
      return $.apply(window, Array.prototype.slice.call(arguments).concat([scope]); 
     }; 
    } 
    var jqUnscoped=$; 
    $.fn.colorText=function(color) { 
     var jQuery=jqScoped(jqUnscoped(this)), $=jQuery; 
     $('.bar').css('color', color); 
    }; 
}(jQuery); 

を...それは$への非セレクタ引数では機能しないかもしれませんが（私はそれをテストしていませんが）。セレクタがあるではないかもしれませんが

Answer 3

、あなたは変数としてjQueryオブジェクトを保存し、上でからそれを使用することができます。例えば...

$.fn.colorText = function(color) { 
    var thisBar = $('.bar', $(this)); 

    thisBar.css('color', color); 

    // continue to use thisBar... 
    // a million other lines of code here... 
}