所有組的jQuery上下文查詢

我建了一個網站上的空白頁上，以便我所有的jQuery的電話像這樣的：所有組的jQuery上下文查詢

$('<div class="wtvr">Stuff</div>').appendTo(document.body); 
$(':checkbox').map(function() { /* bunch of code */ });

等。它工作正常，但這是我的問題：我想把這段代碼放到一個div，在其他元素的頁面上，問題是我使用的代碼將不會工作，如果頁面上有其他元素

我知道我可以去通過我的所有代碼，然後重寫工作（即$(':checkbox')到$('#container :checkbox')），我的問題是：

我可以以某種方式建立一個上下文基地我所有的jQuery的呼籲？我想創建一個div並運行div的上下文中的所有代碼。

我希望能夠做到這一點：

$.context('#container'); 

//the following should do the same as $('#container').find(':checkbox').blah(); 
$(':checkbox').blah() // do like $('#container').find(':checkbox').blah(); 

//this should do the same as $('<div>Stuff</div>').appendTo('#container'); 
$('<div>Stuff</div>').appendTo(document.body);

來源

2012-03-14 qwertymk

我建議只是重構它使用$（「＃集裝箱」）。找到（...）無處不在，等等，你在你的問題中提到。即使可以設置上下文（除非你自己推出），你可能不想這樣做，因爲它會干擾你的模塊之外發生的其他異步jQuery的東西。（有趣的想法雖然） – 2012-03-14 00:09:07

你有兩種說法。我將稱之爲「A」（$(':checkbox').blah()），我將稱之爲「B」（$('<div>Stuff</div>').appendTo(document.body);）。

從技術上說，是的，你可以用這種方式重寫「A」：

$(':checkbox', $('#container')).blah();

一個解釋見jQuery documentation。更重要的是（我會解釋爲什麼很快），你可以（應該？），而不是使用：

var context = $('#container'); 
$(':checkbox', context).blah();

或

var context = $('#container'); 
context.find(':checkbox').blah();

對於聲明「B」，然而，你告訴jQuery的明確將<div>附加到document.body - 所以不，沒有辦法得到document.body意味着$('#container')。而且 - 如果有人確實有一個狡猾的方式來這樣做 - 這不是一個好主意，因爲違反直覺，它會混淆每個讀過代碼的人（包括你，從現在起兩個月後你回來改變東西）。

的多，多更好的方法是存儲你的「背景」在一個臨時變量，像這樣：

var context = $('#container'); 
context.find(':checkbox').blah(); 
context.append('<div>Stuff</div>');

你會看到使用所有的地方這種模式。通過所有重要措施，您可以找到「最小開銷」的解決方案：輸入代碼，讀取代碼，代碼大小，執行速度，緩存利用率和自我記錄。

來源

2012-03-14 01:16:17

還有就是目前的jQuery的API中沒有這樣的context功能。

您可以編寫一個插件，如果喜歡...
提出這項新功能的jQuery，this是要求它的地方。

來源

2012-03-14 00:09:00 gdoron

是的 - 至少對於OP的第一條語句（'$（'：checkbox'）。blah（）'），但沒有額外的參數。請參閱http://api.jquery.com/jQuery/。 – 2012-03-14 01:19:06

@Chris。他沒有詢問那個選擇器，他不想包含「_additional argument_」 – gdoron 2012-03-14 01:22:17

不，你不應該那樣做。它使你的代碼非常混亂。

這不是太大的開銷放在上下文中的變量：

var c = $('#container'); 

c.children(':checkbox').blash(); 
c.children('<div>Stuff</div>').appendTo(document.body);

來源

2012-03-14 00:17:41 Deestan

這根本不起作用 – qwertymk 2012-03-14 00:21:36

我想你的意思是'c。（...）'，而不是'c。$（。 ..）'。 – 2012-03-14 01:16:49

我給了一個derp。固定。 – Deestan 2012-03-14 13:41:44

我會用咖喱來返回返回jQuery的功能。

function makeContext(containerSelector){ 
    var jContext = $(containerSelector); 
    return function (newQuery){ 
     return jContext.find(newQuery); 
    } 
} 

var context = makeContext('#container'); 
context(':checkbox').blah(); 

//or if you prefer 

$.context = makeContext('#container'); 
$.context(':checkbox').blah();

然後，您可以設置您的上下文，並做了查找和替換爲在代碼中的相關部分「$」與「語境」取代。如果jQuery有一個根上下文函數，問題就變成了，當你需要的時候，你如何擺脫上下文？

加上這種方式，您可以控制，更新並具有多種環境，如：

var homeContext = makeContext('#homeElement'); 
var aboutContext = makeContext('#aboutElement'); 

//multiple context's living together 
homeContext(':checkbox').blah(); 
aboutContext(':checkbox').foo(); 

//change context meaning later 
homeContext = makeContext('home2Element'); 
homeContext(':checkbox').blah();

來源

2012-03-14 00:30:21 Fresheyeball

所有組的jQuery上下文查詢

回答

相關問題