编辑dom后CSS nth-child的奇怪行为

Question

我按以下顺序有四个div容器：

每个容器都有CSS类“图表多模式”，样式为：

.chart.multi-mode {
    width: 300px;
    height: 200px;
    margin: 0 15px 15px 0;
}

每隔一个div应该没有右边距，所以我使用：

.chart.multi-mode:nth-child(2n) {
    margin-right: 0px;
}

这是正常工作，直到我使用 jQuery sortable（）

当拖动一个div并保持时，jQuery添加了一个占位符，我还给了类“图表多模式”，原始对象变为绝对，我删除了“多模式”类。

但是nth-Child不关心删除“多模式”类并且仍然计算绝对div，因此边距设置错误，请参见此处：

任何解决方案？

Answer 1

要选择带有类的第二个元素，在更改之后，您无能为力。我能想到的唯一一种选择器是从不包含类的元素开始设置层次结构，并使用立即前进兄弟选择器+来定位第二个：

未测试

li:not(.chart.multi-mode) + .chart.multi-mode + .chart.multi-mode {

}

Answer 2

我敲了一些可行的东西，使用不同的方法布置方框（参见我的评论Weird behavior of CSS nth-child after editing dom）：

基本上是Bootstrap网格的无响应轻型版本：

＆＃13;

＆＃13;

* { box-sizing: border-box; }

body {
    padding: 50px;
}

#chartlist {
    list-style: none;
    margin: 0 -8px;
    padding: 0;
    width: 600px;
}

#chartlist::after {
    content:"";
    display:table;
    clear:both;
}

.chart.multi-mode {
    float: left;
    width: 300px;
    height: 200px;
    margin-bottom: 16px;
    padding: 0 8px;
    position: relative;
}

.chart-holder {
    border: 1px solid #333;
    background: #999;
    height: 100%;
}

.chart.placeholder {
    background: rgba(255, 0, 0, 0.5);
    position: absolute;
    right: -20px;
    top: 20px;
}

＆＃13;

<ul id="chartlist">
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #1</div>
    </li>
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #2</div>
    </li>
    <li class="chart multi-mode placeholder">Chart Placeholder</li>
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #3</div>
    </li>
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #4</div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

（或http://jsfiddle.net/maryisdead/vfm5d3au/）

Answer 3

我用Javascript解决了它：

            this.$chartList.sortable({
                placeholder : "chart chart-placeholder " + chartTypeClass,
                handle : ".opt-drag",
                start : function(event, ui) {
                    ui.item.addClass('drag-state');
                    $('.multi-mode:not(.drag-state):odd').addClass('odd');
                    $('.multi-mode:not(.drag-state):even').addClass('even');
                },
                change : function(event, ui ) {
                    $('.multi-mode').removeClass('odd');
                    $('.multi-mode').removeClass('even');
                    $('.multi-mode:not(.drag-state):odd').addClass('odd');
                    $('.multi-mode:not(.drag-state):even').addClass('even');
                },
                stop : function(event, ui) {
                    ui.item.removeClass('drag-state');
                    $('.multi-mode').removeClass('odd');
                    $('.multi-mode').removeClass('even');
                },
                update : function() {
                    uiBehavior.startSpinner();
                    var newUuidOrder = [];
                    $('.chart').each(function() {
                        newUuidOrder.push($(this).attr('uuid'));
                    });
                    _this.restSetChartsOrder(newUuidOrder, function() {
                        uiBehavior.stopSpinner();
                    });
                }
            });

在开始 Draggin或列表更改时，我计算元素并添加奇数或偶数类。

CSS看起来像这样：

.chart.multi-mode.odd {
    margin-right: 0px !important;
}

.chart.multi-mode.even {
    margin-right: 15px !important;
}

感谢所有人！

Answer 4

使用此

取消占位符

.chart.multi-mode:not(.chart-placeholder):nth-child(2n)