Style a div differently when a specific class exists in a child div / jQuery

Question

Basically I need div.content to have a default padding of 15px EXCEPT for when the div has the child div.products-list. If the child div of .products-list exists I need div.content to have no padding. I read and saw several solutions using jquery, but it seems to have no effect. My layout is like this:

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
$(".products-list").parents("div.content").css("padding", "0");
});
</script>

<style>
.content {
padding: 15px;
}
</style>

</head>

<body>
<div class="content">
<div class="products-list"></div>
</div>
</body>

Thanks for any help!

Releated question: http://stackoverflow.com/q/2000582/901048 — Blazemonger, Oct 19 '11 at 15:46
Perhaps the problem is elsewhere and this is working but you have other problems causing whatever root issue you are trying to solve?? Maybe try turning your default padding up to 150px so you can see really clearly if it is being reset down to nothing. or change the setting of padding to setting of a background-colour so you can test the jquery itself. I agree with richard Banks though that what you have seems to work... — Chris, Oct 19 '11 at 15:55

score 2 · Answer 1 · answered Oct 19 '11 at 15:41

2

if($("div.product-list div.content").length > 0) {
    $("div.product-list").css('padding', 0);
}

answered Oct 19 '11 at 15:41

Manuel van Rijn

9,800
1
24
49

$(document).ready(function(){ if($("div.product-list div.content").length > 0) { $("div.product-list").css('padding', 0); } }); – Nicole McCoy Oct 19 '11 at 15:52
Your selectors are the wrong way round here (div.content isn't a child of div.product-list). Also this shouldn't behave any differently. Except I would imagine a bit slower since it does the selecting all over again (I assume parents is a relatively quick function compared to a selector search across the whole dom. – Chris Oct 19 '11 at 15:54

score 1 · Accepted Answer · answered Oct 19 '11 at 15:50

1

You could use a little CSS trickery to "eliminate" the padding by using negative margins on the inner div:

div.content {
    padding: 15px;
}
div.products-list {
    margin: -15px;
}

http://jsfiddle.net/mblase75/2HRUc/

answered Oct 19 '11 at 15:50

Blazemonger

82,329
24
132
176

Awesome! That worked. And such a simple solution too. I was completely over thinking the problem. Thanks! – Nicole McCoy Oct 19 '11 at 15:55

Style a div differently when a specific class exists in a child div / jQuery

2 Answers2