是否有一种方法来“跳过”不必要的元素在使用CSS显示时的嵌套结构中：table？ [英] Is there a way to "skip" unnecessary elements in a nesting structure when using CSS display:table?

问题描述

我有类似的结构：

<div style="display:table">
    <div class="unnecessary element">
        <div class="unnecessary element">
            <ul style="display:table-row">
                <li style="display:table-cell">Hello everybody.</li>
                <li style="display:table-cell">This is an example</li>
                <li style="display:table-cell">of a recurring structure</li>
            </ul>
        </div>
    </div>
    <div class="unnecessary element">
        <div class="unnecessary element">
            <ul style="display:table-row">
                <li style="display:table-cell">that has some extra</li>
                <li style="display:table-cell">html elements giving the poor</li>
                <li style="display:table-cell">front end dev a headache.</li>
            </ul>
        </div>
    </div>
    <div class="unnecessary element">
        <div class="unnecessary element">
            <ul style="display:table-row">
                <li style="display:table-cell">Could someone figure out</li>
                <li style="display:table-cell">how to make this mess</li>
                <li style="display:table-cell">behave like a table without changing the markup?</li>
            </ul>
        </div>
    </div>
</div>

有没有办法跳过或忽略不必要的元素，表的渲染？该结构是由Wordpress的电子商务插件生成的，我不想去破解它的源代码，如果我可以避免它。

Is there a way to "skip" or "ignore" the unnecessary elements so that they would not affect the rendering of the table? The structure is generated by an eCommerce plugin for Wordpress and I don't want to go around hacking it's source if I can avoid it.

当然，我可以只做最深的三个级别显示为一个表，tr和td，但是后来它看起来不像表，而是三个表堆叠在一起。

Sure, I can make only the deepest three levels to display like a table, tr and td's, but then it will not look like a table, but three tables stacked on each other.

推荐答案

更优雅的解决方案是确保这不会发生。表看起来不是这样的，并且没有样式可以让它们看起来像这样！

所以，假设你不能改变生成的HTML，这里是一个临时解决方案来更改DOM树事后。但只是作为最后一个沟渠的努力，介意你！

The more elegant solution is to make sure this doesn't happen. Tables don't look like that, and there is no styling available to make them look like that!
So, assuming you can't change the resulting HTML at all, here is a makeshift solution to change the DOM tree after the fact. But only as a last ditch effort, mind you!

（我也包括一些CSS，使表看起来像一个表，但我很确定你已经自己的样式，因此您可以忽略CSS位。）

(I also included some CSS to make the table look like a table, but I'm pretty sure you already have styles of your own, so you can ignore the CSS bit.)

var divs = document.querySelectorAll('div[style="display:table"] > div.unnecessary > div');
var content = '';
for (var i = 0; i < divs.length; ++i) content += divs[i].innerHTML;
divs[0].parentNode.parentNode.innerHTML = content;

div[style="display:table"] {
  border-spacing: 2px;
  border: 1px outset #808080;
}
div[style="display:table"] > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
div[style="display:table"] > ul > li {
  vertical-align:middle;
  padding: 2px;
  border: 1px inset #808080;
}

<div style="display:table">
  <div class="unnecessary element">
    <div class="unnecessary element">
      <ul style="display:table-row">
        <li style="display:table-cell">Hello everybody.</li>
        <li style="display:table-cell">This is an example</li>
        <li style="display:table-cell">of a recurring structure</li>
      </ul>
    </div>
  </div>
  <div class="unnecessary element">
    <div class="unnecessary element">
      <ul style="display:table-row">
        <li style="display:table-cell">that has some extra</li>
        <li style="display:table-cell">html elements giving the poor</li>
        <li style="display:table-cell">front end dev a headache.</li>
      </ul>
    </div>
  </div>
  <div class="unnecessary element">
    <div class="unnecessary element">
      <ul style="display:table-row">
        <li style="display:table-cell">Could someone figure out</li>
        <li style="display:table-cell">how to make this mess</li>
        <li style="display:table-cell">behave like a table without changing the markup?</li>
      </ul>
    </div>
  </div>
</div>

这篇关于是否有一种方法来“跳过”不必要的元素在使用CSS显示时的嵌套结构中：table？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！