有沒有辦法共享jQuery上下文？

我試圖用jQuery Button爲我的頁面上的每個項目建立一個按鈕欄;然而，在下面的例子中，當項目數量超過100時，性能很差。我爲我的調用添加了上下文，這有助於一些幫助，但它讓我感到困惑，因爲我正在爲每個構建的按鈕修改相同的上下文。有沒有辦法共享jQuery上下文？

以下是用於向頁面中的每個項目添加雙按鈕按鈕欄的代碼示例。上下文是一樣的，但它會在按鈕欄中的每個按鈕上迭代。有沒有一種方法來遍歷這個上下文一次並應用代碼來設置每個按鈕？

function initLater() 
{ 
    $(function() { 

     $('input.ItemSelect', $('#container fieldset div.controls div.controlsToolbar')).button({ 
      text: false, 
      icons: { 
       primary: 'ui-icon-check' 
      } 
     }); 
     $('a.btnPrint', $('#container fieldset div.controls div.controlsToolbar')).button({ 
      text: false, 
      icons: { 
       primary: 'ui-icon-print' 
      } 
     }); 
    }); 
}

來源

2010-06-15 William Jens

您可以存儲並重新使用使用.find()的參考，像這樣：

function initLater() 
{ 
    $(function() { 
     var ctx = $('#container fieldset div.controls div.controlsToolbar'); 
     ctx.find('input.ItemSelect').button({ 
      text: false, 
      icons: { 
       primary: 'ui-icon-check' 
      } 
     }); 
     ctx.find('a.btnPrint').button({ 
      text: false, 
      icons: { 
       primary: 'ui-icon-print' 
      } 
     }); 
    }); 
}

一個$(selector, context)通話實際上只是一個context.find(selector)內部反正you can see how it's handled here :)

另外，您可以使用.end()鏈接它，如下所示：

$('#container fieldset div.controls div.controlsToolbar') 
    .find('input.ItemSelect').button({ 
    text: false, 
    icons: { primary: 'ui-icon-check' } 
}).end().find('a.btnPrint').button({ 
    text: false, 
    icons: { primary: 'ui-icon-print' } 
});

來源

2010-06-15 15:34:48

+1顯示相關的jQuery源代碼。瞭解事情如何實際完成總是有用的。 – 2010-06-15 15:48:10

我喜歡這些，但我希望找到一種方法，不必重複每個按鈕的上下文。我真的很喜歡的一種方法是在上下文的每次擊中內應用我所有的按鈕設置，這樣我只能遍歷上下文一次。 – 2010-06-15 17:01:01

@William - 這會評估'#container字段集div.controls div.controlsToolbar'選擇器一次，將結果作爲DOM元素存儲在數組中（jQuery對象是DOM元素的包裝數組），您不會兩次讀取它，在那些你正在尋找'input.ItemSelect'和'a.btnPrint'的元素中，但是你沒有抓取樹來再次進入'.controlsToolbar'，這是你的擔心嗎？ – 2010-06-15 17:03:05

是的。

var toolbar = $('#container fieldset div.controls div.controlsToolbar'); 

toolbar.find('input.ItemSelect').button(...);

來源

2010-06-15 15:33:57 SLaks

我不明白爲什麼不。 $('#container fieldset div.controls div.controlsToolbar')只是jQuery對象的一個實例，因此它可以被存儲：

function initLater() 
{ 
    $(function() { 
     var cntxt = $('#container fieldset div.controls div.controlsToolbar'); 
     $('input.ItemSelect', cntext).button({ 
      text: false, 
      icons: { 
       primary: 'ui-icon-check' 
      } 
     }); 
     $('a.btnPrint', cntext).button({ 
      text: false, 
      icons: { 
       primary: 'ui-icon-print' 
      } 
     }); 
    }); 
}

來源

2010-06-15 15:35:19

有沒有辦法共享jQuery上下文？

回答

相關問題