jQuery how to add class to a parent div which has a 3rd level child div with a specific class name.
Posted
by
Vikram
on Stack Overflow
See other posts from Stack Overflow
or by Vikram
Published on 2011-01-07T21:50:00Z
Indexed on
2011/01/07
21:53 UTC
Read the original article
Hit count: 190
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.
© Stack Overflow or respective owner