Reputation: 1970
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
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
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
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
Reputation: 364
Try modifying your selector:
$(document).ready(function(){
$(".intro div:not(.big)").css("background-color", "yellow");
});
Upvotes: 1
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