Home/ Questions/Q 257199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T22:04:38+00:00

After feedback, complete rewrite of the question. I have the following mark up :

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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