Question

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-c"> 
                <!-- 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 <div 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.

Answer 1

You can perform you selection logic in a standard jQuery selector, and then for each sidebar you find travel up the DOM tree finding the first div with the class equal and attaching a class to it with the name of each sidebar’s id:

$('div.equal div.block div[id^="sidebar"]').each(function() {
    $(this).closest('div.equal').addClass(this.id);
});