将复杂的jQuery CSS选择器转换为上下文以进行缓存 [英] Turning a complex jquery css selector into a context for caching
问题描述
反馈后，请完全重写问题.
我有以下标记:
<body>
<h1>Title</h1>
<p>bla</p>
<div>
... <!-- a thousand tags -->
</div>
<div id="do-not-modify-me">
<!-- a hundred tags -->
</div>
</body>
我可以访问:
<h1>Title</h1>
<p>bla</p>
<div>
... <!-- a thousand tags -->
</div>
使用:
$('body > *:not(div#do-not-modify-me)');
我这样做是为了获得除div之外的所有主体内容，其ID为"do-not-modify-me".
I do that so I can get all the content of the body except the div with the id "do-not-modify-me".
现在，假设我要构建一个函数，该函数可以让另一个程序员选择主体中的任何内容，就像使用jquery进行选择一样.另一个程序员不应该修改div#do-not-modify-me，但他也不必关心它.
Now, let's say that I want to build a function that let another programmer to select anything in the body, just like the select with jquery. The other programmer should not modify div#do-not-modify-me, but he should not have to care about it neither.
$('body > *:not(div#do-not-modify-me)')将被调用很多时间，因此我们将其缓存.
$('body > *:not(div#do-not-modify-me)') will be called a lot of time, so we will cache it.
想法是:
// TEST CODE
windows.new_body = $('body > *:not(div#do-not-modify-me)');
function select(selector) {
return $(selector, windows.new_body);
}
因此其他程序员应该能够做到:
So the other programmer should be able to do :
// TEST RESULT CODE
select("p").css("color", "red");
它将主体中的所有<p>都涂成红色，但不会将div#do-not-modify-me中包含的所有内容涂成红色.
It would color in red all the <p> in the body, but not the ones contained in div#do-not-modify-me.
TEST CODE不起作用，因为当前它将css()应用于上下文结果的子级，而不是自身的结果.
The TEST CODE does not work, because currently, it applys css() on the children of the result of the context, not the result it self.
E.G:
select("p").css("color", "red");
行为类似:
$('body > * p :not(div#do-not-modify-me)').css("color", "red");
所需的结果是:
$('body > p :not(div#do-not-modify-me)').css("color", "red");
请注意:
$('body > * :not(div#do-not-modify-me)').parent().css("color", "red");
不起作用，因为<p> div#do-not-modify-me变成红色.
Does not work because the <p> div#do-not-modify-me turn into red.
您将如何在测试结果代码"中获得结果?您可以修改代码的任何部分.
How would you obtain the result in TEST RESULT CODE ? You can modify any part of the code.
推荐答案
我删除了所有以前的EDIT，因为它们不再相关，您可以在EDIT历史中阅读它们.
EDIT3
基本上，问题在于您无法缓存选择器.那是因为$()函数返回匹配的对象，而不是不匹配的对象.这意味着使用缓存的选择器将意味着缓存可能与真实DOM不同步. IE.在这个简单的页面中:
I removed all the previous EDIT's as they are no longer relevant, you can read them in the EDIT history.
EDIT3
Basically the problem is that you can not cache the selector. That is because the $() function returns matched objects, not un-matched objects. This means that using a cached selector will mean that the cache can get out of sync with the real DOM. I.e. in this simple page:
<div>
<p>foo</p><p>bar</p>
</div>
<div class='bar'></div>
.
var context = $('body').children(':not(.bar)'); //this holds: <div><p>foo</p><p>bar</p></div>
$('div', context).append('<p class="x">HAI</p>');
//context still is <div><p>foo</p><p>bar</p></div> even though it should be
//<div><p>foo</p><p>bar</p><p class="x">HAI</p></div>
因此，您每次都必须重做选择，大胆地在这里有两个选择:
So you have to redo the selection everytime, bassicly you have two options here:
//reselect the non-editable area everytime
function select(selector) {
return $(selector, $('body').children(':not(div#do-not-modify-me)') );
}
//or, check the selection against being in the reselectable area.
function select(selector){
return $(selector).filter(function(){
return $(this).parents(':not(div#do-not-modify-me)');
});
}
您应该尝试一下哪个更快.我认为没有其他方法可以确保您不会在#do-not-modify-me div中进行搜索.
You should try out yourself which one is faster. I do not think there is any other way to make sure you do not search in the #do-not-modify-me div.
您可以采取其他措施使此操作更加容易(我认为更快)是将可编辑区域包装在div中:
Something else you could do to make this even more easy (and faster I think) is wrap the editable area in a div:
<body>
<div id='modify-me'>
<h1>Title</h1>
<!-- thousands of tags -->
</div>
<div id='do-not-modify-me'>
<!--hundreds of tags -->
</div>
</body>
那你就可以做
function select(selector) {
return $(selector, $('#modify-me') );
}
这篇关于将复杂的jQuery CSS选择器转换为上下文以进行缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
