jQuery如何向父div添加类，该父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网格系统的PHP动态生成的，style="height: 999px;也是由一个用于相等列的jQuery脚本生成的。

我想要的是添加一个唯一的类名，就像这样......查找class为.equal的div，其child div的class为.block，并且进一步具有child div的ID为sidebar-a。

如果为TRUE，则将.sidebar-a的class添加到class为.equal的主div中

所以结果看起来像这样：

<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

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

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