Turning a complex jquery css selector into a context for caching

问题

After feedback, complete rewrite of the question.

I have the following mark up :

<body>
  <h1>Title</h1>
  <p>bla</p>
  <div>
    ... <!-- a thousand tags -->
  </div>

  <div id="do-not-modify-me">
   <!-- a hundred tags -->
  </div>

</body>

I can access to :

  <h1>Title</h1>
  <p>bla</p>
  <div>
    ... <!-- a thousand tags -->
  </div>

Using :

$('body > *:not(div#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".

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)') will be called a lot of time, so we will cache it.

The idea is :

// 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");

It would color in red all the <p> in the body, but not the ones contained in div#do-not-modify-me.

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");

Behaves like :

$('body > * p :not(div#do-not-modify-me)').css("color", "red");

While the desired result would be :

$('body > p :not(div#do-not-modify-me)').css("color", "red");

Note that :

$('body > * :not(div#do-not-modify-me)').parent().css("color", "red");

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.

回答1:

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

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.

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>

Then you can just do

function select(selector) {
  return $(selector, $('#modify-me') );
}

回答2:

You said the code can be modified in any way, right? Why not just think of it as what you do want to search instead of what you don't want to search. Put the rest of the code in a <div> and just use that as the context. It's not going to win any elegance awards but it's simple and Gets The Job Done^TM.

回答3:

I'm pretty sure you can just use 'context' directly, like so:

context = $('body > *:not(div#do-not-modify-me)');
context.doStuff();

回答4:

After reading the extended explanation I'll try my shot:

context = $('body > *:not(div#do-not-modify-me)');
$("*:first",context);

You can even do:

  context = $('body > *:not(div#do-not-modify-me)');
  context.find( "*:first");

To get number of element you can do:

var len = context.length;

To access to element number i in the collection you can use:

context.get(i);

And there are tons of useful information on api.jquery.com, also read this probably you will want to create your own selector.

EDIT:
After, I saw your recent update I think what you are looking for is for ability iterate over context results elements, so it could be done as I've mentioned here several time by:

    for ( var i = 0; i < context.length; ++i)
    {
         $( context[i]).method( );
         // do here you checks, adding, removing.
    }

This, doesn't look that clever, but should work, you can encapsulate this by extending $.fn and implementing function for your purpose. EDIT #2:
Let's try another way:

    (function($)
    {
         $.fn.tagName = function( ) 
         {
             return this.get(0).tagName;
         };
         $.fn.pick = function( tag)
         {
             return this.filter( function( )
             {
                return $(this).tagName == tag;
             });
         };
    }

})(jQuery);

After this you can do contex.pick( "p"), so it will return you all paragraph inside your result set, but this code is incomplete, so you need to look some more into jquery code, for example to implement it in a way you will be able to use complete jquery functionality with pick function, probably you need to consider to use xpath DOM parser.

来源：https://stackoverflow.com/questions/977185/turning-a-complex-jquery-css-selector-into-a-context-for-caching

标签

jquery

selector

extend