CODEWITHSUNDEEP
jquery
Alvin MP
Alvin MP

Reputation: 13

How to exclude specific child with jquery?

This is my HTML

<div class="big-wrap">
  <div class="logoburger">
    <div class="burgermenu">
      <img class="burger" src="/includes/pictures/1452702292_menu-alt.svg">
    </div>
    <div class="search">
      <div id="search-icon"></div>
      <form class="ui-widget" method="POST" action="../">
        <input id="tags" placeholder="Search.." name="search" class="ui-autocomplete-input" autocomplete="off">
      </form>
    </div>
    <div class="logo">
      <a class="homepage" href="/">
        <img src="/includes/pictures/Logo.svg" alt="Logo">
      </a>
    </div>
  </div>
 <div class="big-content"></div>
</div>

This is my css

.pushedoff {
  opacity: 0.4;
  pointer-events: none;
}

This is my jquery.

$('.burgermenu').click(function() {
  $('.big-wrap').not($'.burgermenu').toggleClass('pushedoff');
}

I want the whole .big-wrap to be 'pushedoff' except for an element with class of 'burgermenu' which is a child inside one of the big-wrap children. I tried to use .not() to exclude the .burgermenu, but it does not seems to work. Is there a way to achieve this? Thank you.

Upvotes: 1

Views: 80

Answers (2)

SAMUEL
SAMUEL

Reputation: 8552

If i understand you correctly,

Following is the issue.

You are applying the CSS to parent and you are trying to exclude it in child but as per CSS property inheritance the child element will also inherit the parents property so you cannot do that

I think following snippet will help you to acheive what you want based on your question and comments

$('.burgermenu').click(function() {
  $('.big-wrap div.logoburger').find('div').not('.burgermenu').toggleClass('pushedoff');
});
.pushedoff {
  opacity: 0.4;
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-wrap">
  <div class="logoburger">
    <div class="burgermenu">
      <img class="burger" alt="menu-alt.svg" src="http://lorempixel.com/200/200/food">
    </div>
    <div class="search">
      <div id="search-icon"></div>
      <form class="ui-widget" method="POST" action="../">
        <input id="tags" placeholder="Search.." name="search" class="ui-autocomplete-input" autocomplete="off">
      </form>
    </div>
    <div class="logo">
      <a class="homepage" href="/">
        <img src="http://lorempixel.com/50/50/business" alt="Logo">
      </a>
    </div>
  </div>
  <div class="big-content"></div>
</div>

Upvotes: 1

Maulik Savaliya
Maulik Savaliya

Reputation: 1260

Please check below code:

$(document).ready(function () {
    $('.burgermenu').click(function() {
        $('.logoburger').children('div').not('.burgermenu').toggleClass('pushedoff');
    });
});

Upvotes: 2

Related Questions