为语义 UI 网格修改 CMS 生成标记的结构

【问题标题】：Modifying structure of CMS generated markup for Semantic UI grid为语义 UI 网格修改 CMS 生成标记的结构
【发布时间】：2016-11-01 20:45:18
【问题描述】：

有没有一种方法可以在不重新设计整个网格样式的情况下在行和列 div 之间添加一个 div？我试图与 SUI 集成的 CMS 插入了一个我无法摆脱的不需要的 div。新结构如下所示：

<div class="ui grid">
  <div class="row">
    <div class="UNWANTED DIV">
      <div class="column">
      </div>
      <div class="column">
      </div>
    </div>
 </div>
</div>

问题是 SUI 期望行之后的下一个 div 是一个带有类列的 div，不幸的是我不能这样做。我是否必须修改语义网格 CSS 来解决这个问题，还是有一些神奇的修复？

任何帮助将不胜感激。

【问题讨论】：

标签： css-selectors content-management-system semantic-ui generated-code

【解决方案1】：

使用条件语句合并不需要的 div 的 outerHTML 和 innerHTML。例如：

var foo = document.querySelector(".row > div");
if(foo.className === "UNWANTED DIV")
  {
  foo.outerHTML = foo.innerHTML;
  }

console.log(document.body.innerHTML);

.row &gt; .column { border: 1px solid red; }

<div class="ui grid">
  <div class="row">
    <div class="UNWANTED DIV">
      <div class="column">
      </div>
      <div class="column">
      </div>
    </div>
 </div>
</div>

参考文献

【讨论】：