jQuery how to add class to a parent div which has a 3rd level child div with a specific class name.
- by Vikram
Hello friends I have an issue adding a special class to a couple of my divs. My layout is like this.
<div class="container">
<div class="grid-6 push-3 equal" style="height: 999px;">
<div class="block">
<div id="mainbody">
<!-- Body content here -->
</div>
</div>
</div>
<div class="grid-2 equal" style="height: 999px;">
<div class="block">
<div id="sidebar-a">
<!-- Sidebar-a content here -->
</div>
</div>
</div>
<div class="grid-2 equal" style="height: 999px;">
<div class="block">
<div id="sidebar-b">
<!-- Sidebar-b content here -->
</div>
</div>
</div>
<div class="grid-2 equal" style="height: 999px;">
<div class="block">
<div id="sidebar-b">
<!-- Sidebar-c content here -->
</div>
</div>
</div>
</div>
I want to add a different background color to each of my sidebars via CSS and when I code like:
#mainbody { background : #fff; }
#sidebar-a { background : #eee; }
#sidebar-b { background : #ddd; }
#sidebar-c { background : #ccc; }
It is applying the background only to that specific class but that specific class is not of equal height. I actually need to apply to this <div class="grid-2 equal" style="height: 999px;"> div.
Now the issue is that in this
<div class="grid-6 push-3 equal" style="height: 999px;"> and class="grid-2 equal" style="height: 999px;">
the class names grid-6 and grid-2 are generated dynamically by my PHP of 960 Grid System and also the style="height: 999px; is generated by a jQuery script for Equal-Columns.
What I want is to add a unique class name like this...... Look for a div with a class of .equal which has a child div with a class of .block and which further has a child div with an ID of sidebar-a.
IF TRUE then add a class of .sidebar-a to the maindiv which has a class of .equal
So that the result looks like this:
<div class="grid-6 equal push-3 mainbody" style="height: 999px;">
<div class="grid-2 equal sidebar-a" style="height: 999px;">
<div class="grid-2 equal sidebar-b" style="height: 999px;">
<div class="grid-2 equal sidebar-c" style="height: 999px;">
Then I'll be able to style it like this:
.mainbody { background : #fff; }
.sidebar-a { background : #eee; }
.sidebar-b { background : #ddd; }
.sidebar-c { background : #ccc; }
Hence I thought since I am anyway using jQuery in my Template, why not use it to deal with this issue. Please feel free to suggest a better way if you have something else in mind.
