CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Frosted Cupcake
Frosted Cupcake

Reputation: 1970

Exclude a div which is nested under another div in jquery

I have to exclude a div which is nested another div in jQuery. Following is my code,

$(document).ready(function(){
    $(".intro").not(".big").css("background-color", "yellow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to My Homepage</h1>
    <div class="intro">My name is Donald.
      <p>I live in Duckburg.</p>
      <p>My best friend is Mickey.</p>
      <div class="big">Who is your favourite:</div>
    </div>
    <ul id="choose">
      <li>Goofy</li>
      <li>Mickey</li>
      <li>Pluto</li>
    </ul>
  </body>
</html>

I have tried .not and .filter methods, but they aren't working. I want to select intro class without selecting big class.

Upvotes: 1

Views: 74

Answers (5)

ConsoleLog
ConsoleLog

Reputation: 511

Your div intro is a wrapping the div big so when you apply a background colour to the intro class it will apply to the whole block hence you don't see the results. However, this can be achieved using just CSS.

$(document).ready(function(){
    $(".intro").not(".big").css("background-color", "yellow");
});
.big{background-color: white}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Welcome to My Homepage</h1>
    <div class="intro">My name is Donald.
      <p>I live in Duckburg.</p>
      <p>My best friend is Mickey.</p>
      <div class="big">Who is your favourite:</div>
    </div>
    <ul id="choose">
      <li>Goofy</li>
      <li>Mickey</li>
      <li>Pluto</li>
    </ul>

Upvotes: 0

TJBlackman
TJBlackman

Reputation: 2353

I would clone the original, then delete .big from the clone. Then you can do whatever you want with the clone.

var intro_copy = $('.intro').clone();
intro_copy.find('.big').remove();

Upvotes: 0

Gavin Thomas
Gavin Thomas

Reputation: 1206

I believe it is working. But the div is positioned within the parent.

Why not set .big to background-color: white;?

Upvotes: 0

Kevin Bruccoleri
Kevin Bruccoleri

Reputation: 364

Try modifying your selector: 

$(document).ready(function(){
    $(".intro div:not(.big)").css("background-color", "yellow");
});

Upvotes: 1

Programmer
Programmer

Reputation: 2123

You should use the not on the children of .intro -

$(".intro *").not(".big")

BTW, if all you want is to change the background, you can do it by css - 

.intro *:not('.big') {
    backgroung: yellow;
}

Upvotes: 0

Related Questions