求教，如何实现一个节点树列表的条纹控制？

如图：要的效果就是，每能显示的每一行，都要按照【黑白黑白黑白】的底色进行渲染。该如何实现？

JZLeung 1楼•5 个月前作者

就是相邻的两行不能是同一种底色。列表层级不定。

zswnew 2楼•5 个月前

用react

来自酷炫的 CNodeMD

JZLeung 3楼•5 个月前作者

@zswnew 现在用的是Vue。自豪地采用 CNodeJS ionic

dislido 4楼•5 个月前

前序遍历节点树，标记序号，绑定颜色用原生写了个，vue的话应该会更简单 css

.black{
  color:#FFF;
  background-color:#000;
}
.white{
  color:#000;
  background-color:#fff;
}

html

<ul id="root">
  <li><p>Item 01</p></li>
  <li><p>Item 02</p></li>
  <li><p>Item 03</p>
    <ul>
      <li><p>Item 04</p></li>
      <li><p>Item 05</p></li>
      <li><p>Item 06</p></li>
      <li><p>Item 07</p></li>
      <li><p>Item 08</p></li>
    </ul>
  </li>
</ul>

function setCls(r, index = 0) {
  [...r.children]
    .map(it => [...it.children])
    .forEach(c => {
      c.forEach(i => {
        if (i.tagName === 'P') {
          i.className = index % 2 ? 'white' : 'black';
          ++index;
        } else if (i.tagName === 'UL') {
          index = setCls(i, index);
        }
      });
    });
    return index;
}
setCls(document.getElementById('root'));