Limit JavaScript to only work inside an element

Question

Is it possible to execute a script only inside an element? For example I have a list of <div> elements with two <span> inside of each element. I check with JS if any div has a class called "boo" assigned to it. If it does, it should add a class "hide" to the <span> with the class "child2", if not, it should add the class "hide" to the other <span> with the class "child1". Here's an example of what I mean.

<div> <span class="child1"></span><span class="child2"></span> </div>
<div class="boo"> <span class="child1"></span><span class="child2"></span> </div>

If I'd now use a script like the following, it would mess up the whole list, because it would also add the class "hide" to the other elements. How can I solve this?

var check = $("div").hasClass("boo");
                  if (check === true) {
                  $( ".child2" ).addClass("hide");
                  }
                  else {
                    $( ".child1" ).addClass("hide");
                  }

Rory McCrossan · Accepted Answer · 2020-04-13 18:48:49Z

6

The issue is because your code is looking at the first div only, and all the .child1 and .child2 elements.

To fix this amend your selector to select by the presence (or lack of) the .boo class:

$('div.boo .child2').addClass('hide');
$('div:not(.boo) .child1').addClass('hide');

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> 
  No boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span> 
  </span>
</div>
<div class="boo">   
  Boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span> 
  </span>
</div>

Also note that if this is being done only for UI reasons then you should not be using JS at all. It can be achieved in CSS alone:

div:not(.boo) .child1,
div.boo .child2 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  No boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span>
  </span>
</div>
<div class="boo">
  Boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span>
  </span>
</div>

Finally note that your span elements are missing a closing tag. I presume this is just a typo in the question so I corrected it in this example.

answered Apr 13, 2020 at 18:48

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sacha Over a year ago

oh thanks, it took me so long testing everything that I lost the easy solution. Thank you!

Elias Faraone · Accepted Answer · 2020-04-13 19:20:39Z

1

You don't need jQuery for this:

let children = document.querySelectorAll('div.boo .child2, div:not(.boo) .child1');

for (var j = 0; j < children.length; j++) {
  children[j].classList.add("hide");
}

You also miss some closing span tags in your html, I'm assuming is just a typo.

Also, as stated above, if it's just a matter of presentation you can accomplish this with simple css.

edited Apr 13, 2020 at 19:20

answered Apr 13, 2020 at 19:04

Elias Faraone

2862 silver badges7 bronze badges

1 Comment

Rory McCrossan Over a year ago

If you're avoiding jQuery then it makes far more sense to use querySelectorAll('div.boo .child2, div:not(.boo) .child1') etc and loop through them to add the hide class.

Collectives™ on Stack Overflow

Limit JavaScript to only work inside an element

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related