tags:

views:

428

answers:

4
Q: 

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  A: 

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') );
}
Pim Jager  2009-06-10 17:59:48
Don't want the children, I need to be able to select in the result of "context", just like I do with $() without anyparameter.
e-satis  2009-06-10 18:06:15
Maybe you will try to figure you question better? Write down what you exactly want, just in code like: "$("guess").do()" and etc.
Artem Barger  2009-06-10 18:09:26
The last sentence in your question is: "I will get all the children of the selected content. How would you modify that, so we can use it right away ?" In which I read: "How to immidiatly get the children, instead having to use $('*', context);
Pim Jager  2009-06-10 18:16:13
I think word "cache" was misused there.
Artem Barger  2009-06-10 18:26:20
That's a good start. But I wish to use $(selector, context) because the code is meant to be use for an external lib that is not supposed to know about the implementation.
e-satis  2009-06-10 18:38:44
somebody explain me what do you mean by children of result? you want explicit result? use context.get(i) where i is index of element in result set.
Artem Barger  2009-06-10 18:53:50
About your edit : I thought about this one, but getting the parent will give me body (or html). Finaly I select everything in it, and the not(div#do-not-modify-me) is invalidat. Interesting puzzle, isn't it ?
e-satis  2009-06-10 18:56:21
Interesting answer, @Pim Jager.
Nosredna  2009-06-10 23:08:40
I will go for the solution where I wrap the stuff to select in a div. A brillant application of the Paul Arden's principle : http://www.amazon.co.uk/Whatever-You-Think-Opposite/dp/0141025719
e-satis  2009-06-11 05:41:29
A: 

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

context = $('body > *:not(div#do-not-modify-me)');
context.doStuff();
cloudhead  2009-06-10 18:01:32
LOL. Of course I can, but all the purpose is to cache it to avoid recalculate it everytime I use it. If the last function modify the jquery object, "context" will not be what I expect anymore ....
e-satis  2009-06-10 18:05:13
If you had phrased your question better, I might have been able to answer better, no need to downmod. pff
cloudhead  2009-06-10 18:06:07
What exactly you are trying to cache? And why to down vote someone, because you cannot ask correct questions?
Artem Barger  2009-06-10 18:06:23
I don't downvote as a sanction, I down vote so people will no that that's not the answer. I understand I should modify the question. I am thinking about the way to make it better.
e-satis  2009-06-10 18:18:55
down voting people you reduce them a reputation, there is a comment to make the notion like that, you know it's much more polite way to let know to the person who tried to help you, event thought you question wasn't so perfect.
Artem Barger  2009-06-10 18:24:12
A: 

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.

Artem Barger  2009-06-10 18:37:00
$("*:first",context) gives me the first of the children of the result. So nope, it's not that. Removing something from body is harder than I thought.
e-satis  2009-06-10 18:44:36
so use $( context.get(0))...
Artem Barger  2009-06-10 18:47:11
Ok, my explanation may have not been so better than my first try because I don't want the first stuff of anything. Damn, where is my english teacher when I need it :-) ?
e-satis  2009-06-10 18:52:38
Put markup of HTML and explain on your fingers.
Artem Barger  2009-06-10 18:54:39
Will do, sir ;-)
e-satis  2009-06-10 19:35:43
@Artem Barger: I don't think you need to go down the xpath road. jQuery bailed on xpath a long time ago (at least for the core library).
Nosredna  2009-06-10 22:11:01
@Nosredna, I do think he is need to use xpath, what he is trying to do is out of regular usage of jquery, he is trying to get set of element collection and keep using selectors to lookup in it and he don't want just to iterate over it. So he definitely need to implement some more new functionality and since common jquery is not enough the use of xpath parser should be considered.
Artem Barger  2009-06-11 05:47:21
+1  A: 

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 DoneTM.

Paolo Bergantino  2009-06-10 22:21:35

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern