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;是由Equal-Columns的jQuery脚本生成的。

我想要的是添加一个像这样的唯一类名......找一个div class .equal的{{1}} child div class .block child div，ID sidebar-a class。

如果为TRUE，则将.sidebar-a div class添加到主.equal <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; }

所以结果如下：

{{1}}

然后我就可以像这样设计它：

{{1}}

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

Answer 1

您可以在标准的jQuery选择器中执行选择逻辑，然后对于您找到的每个侧边栏，在DOM树中找到第一个div，其中包含类equal，并使用每个类的名称附加一个类侧边栏的ID：

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

jQuery如何将类添加到父div中，该div具有具有特定类名的第3级子div

1 个答案: