jQuery如何将类添加到具有特定类名的第三级子div的父div

Question

您好朋友，我在为我的几个 div 添加特殊类时遇到问题。我的布局是这样的。

<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>

我想通过 CSS 为我的每个侧边栏添加不同的背景颜色，当我编写如下代码时：

#mainbody { background : #fff; }
#sidebar-a { background : #eee; }
#sidebar-b { background : #ddd; }
#sidebar-c { background : #ccc; }

它仅将背景应用于该特定类，但该特定类的高度不相等。我实际上需要申请这个<div class="grid-2 equal" style="height: 999px;"> div。

现在的问题是在这个

<div class="grid-6 push-3 equal" style="height: 999px;"> 和 <div class="grid-2 equal" style="height: 999px;">

类名grid-6 和grid-2 是由我的960 Grid System 的PHP 动态生成的，style="height: 999px; 也是由Equal-Columns 的jQuery 脚本生成的。

我想要的是添加一个像这样的唯一类名......寻找一个div 和一个.equal 的class，它有一个child div 和一个class 的.block @ 并且还具有child div 和ID 的sidebar-a。

如果为真，则将 .sidebar-a 的 class 添加到具有 .equal 的 class 的 maindiv 中

所以结果看起来像这样：

<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;">

然后我就可以这样设置样式了：

.mainbody { background : #fff; }
.sidebar-a { background : #eee; }
.sidebar-b { background : #ddd; }
.sidebar-c { background : #ccc; }

因此我想既然我在我的模板中使用 jQuery，为什么不使用它来处理这个问题。如果您有其他想法，请随时提出更好的方法。

Answer 1

您可以在标准的 jQuery 选择器中执行您的选择逻辑，然后对于每个侧边栏，您会在 DOM 树上找到第一个带有 equal 类的 div，并使用每个侧边栏的 id 的名称将一个类附加到它上面：

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