jquery - 用于重嵌套 div 结构的 CSS/jQuery nth-child

Question

我有一个非常嵌套的 div 结构，我试图将其排序为 3 列。

<div class="view-content">

<div class="view-grouping">
    <h1>Group 1</h1>
    <div class="view-grouping-content">  
        <div class="views-limit-grouping-group">
            <h2>Subgroup 1</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 1</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 2</div>
            </div>
        </div> <!-- end of Subgroup 1 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 2</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 3</div>
            </div>
        </div> <!-- end of Subgroup 2 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 3</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 4</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 5</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 6</div>
            </div>
        </div>  <!-- end of Subgroup 3 -->
    </div> <!-- end of inner Group 1 wrapper -->
</div> <!-- end of Group 1 -->

<div class="view-grouping">
    <h1>Group 2</h1>
    <div class="view-grouping-content">  
        <div class="views-limit-grouping-group">
            <h2>Subgroup 4</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 7</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 8</div>
            </div>
        </div> <!-- end of Subgroup 4 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 5</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 9</div>
            </div>
        </div> <!-- end of Subgroup 5 -->
        <div class="views-limit-grouping-group">
            <h2>Subgroup 6</h2>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 10</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 11</div>
            </div>
            <div class="views-limit-grouping">
                <div class="custom-widget">Item 12</div>
            </div>
        </div>  <!-- end of Subgroup 6 -->
    </div> <!-- end of inner Group 2 wrapper -->
</div> <!-- end of Group 2 -->

每三分之一 (3n+3) .custom-widget 应该有一个 margin-right: 0;

如果我使用:

.view-grouping .view-grouping-content .views-limit-grouping-group:nth-child(3n+3) .custom-widget{   
    margin-right: 0;
}

由于嵌套的 div 结构，它不会工作。

这是一个动态布局(在 Drupal 构建中使用它)因此可以有任意数量的组、子组。另外，可以没有。如果元素在前面提到的任何分组 DIV 中。

为了一个简单的例子，我将主包装器放在 320px 处，它应该包装 3 个元素，包括前 2 个元素的 10px 间距。

我完全可以同时使用 CSS 和 jQuery 来解决这个问题。您知道我应该如何处理这个问题吗？

谢谢!

附言jsFiddle 在这里:https://jsfiddle.net/6m2bqaa1/1/

Answer 1

Use nth-of-type, hopefully it will help you:

.views-limit-grouping-group > div:nth-of-type(3) .custom-widget{margin-right:0}


or you can add whole css as under:

h1, h2 {
    display: none;
}

.views-limit-grouping-group{clear:both; overflow:hidden}

.views-limit-grouping{float:left}

.view-content{
    position: relative;
    margin: 0 auto;
    width: 320px;
}

.custom-widget{
    background-color: lightblue;
    float: left;
    width: 100px;
    height: 100px;
    margin-top: 10px;
    margin-right: 10px;
}

.views-limit-grouping-group > div:nth-of-type(3) .custom-widget{
    margin-right: 0;
    background: red;
}

your problem will be solve.