0

I wrote a script in jquery that adds class to all the elements on the page with the help of the selector * (all). I would like to rule out one element of the div with all his children. I'm wondering how to do that. I tried to use a pseudo-class :not, including the mentioned div, but I don't know how to exclude his children as well. Can any of you help me solve this ?

Code with pseudo-class :not

$(document).ready(function(){
   $('#yellow-background').click(function(){
      $(':not(div[aria-label="Slajder"])').addClass("yellow-background");
});

Normal code:

$(document).ready(function(){
   $('#yellow-background').click(function(){
      $('*').addClass("yellow-background");
});
Maths RkBala
  • 2,207
  • 3
  • 18
  • 21
nsog8sm43x
  • 329
  • 5
  • 14

1 Answers1

1

ALL elements? Why not make a yellow overlay and show the div in the middle of that instead?

Anyway

$("*:not('div[aria-label=Slajder] *')").addClass("yellow-background");

is harder to write than 

$('*').not('div[aria-label="Slajder"] *').addClass("yellow-background");

due to quotes but both work

$(function() {
  $('#yellow-background').click(function() {
    $('*').not('div[aria-label="Slajder"] *').addClass("yellow-background");
  });
});
.yellow-background {
  background-color: yellow
}
[aria-label=Slajder] { background-color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="yellow-background">Yellow</button>

<div>Content
  <div>content
    <div aria-label="Slajder"><h1>Slajder </h1>
      <div>
        exluded content
          <div>more exluded content</div>
      </div>
    </div>
    more content
  </div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • OK, that really makes sense. I just want to exclude all the children of this diva now. – nsog8sm43x Jun 18 '20 at 12:45
  • OK, it works. But only now have I noticed a problem that complicates the solution. In the children of this div, there are more children, and more in them. Ultimately, I'd like to exclude them all. – nsog8sm43x Jun 18 '20 at 12:51
  • Hi, I'm not into JQuery (too much), but your JS code does 2 searches now? First look for all `*` elements and then search again to find the `div`? Traversing the list of elements once should be enough to figure out the exception to the rule (yellow or not). – Rene van der Lende Jun 18 '20 at 12:53
  • Ok, was just making sure (being curious), not ranting at all, jQuery in certainly not my forté. Can the `&('...')` selectors be a comma delimited list? (saw the update, cool!) – Rene van der Lende Jun 18 '20 at 12:57
  • https://api.jquery.com/multiple-selector/#:~:text=You%20can%20specify%20any%20number,will%20be%20in%20document%20order. – mplungjan Jun 18 '20 at 12:58
  • This is exactly the effect I wanted to get. Thank you very much for your help. Lesson with .find() method remembered! – nsog8sm43x Jun 18 '20 at 12:59
  • @nsog8sm43x - but the find was not needed after all. See the latest update – mplungjan Jun 18 '20 at 12:59
  • I found one with :not too – mplungjan Jun 18 '20 at 13:01
  • 1
    Indeed, they both do. Thank you once for your help and learning material :) – nsog8sm43x Jun 18 '20 at 13:11