javascript - 将粗体类添加到包含新消息的父类

Question

我有一个 UL 列表，其中 data-total 是“Total New Messages”:

<ul>
    <li data-total="0">Node 1</li>
    <li data-total="4">Node 2</li>
    <li data-total="0">Node 3
        <ul>
            <li data-total="0">sub node 1</li>
            <li data-total="0">sub node 2
                <ul>
                    <li data-total="0">test node 1</li>
                    <li data-total="2">test node 2</li>
                    <li data-total="7">test node 3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-total="0">Node 4</li>
</ul>

如果 child 有未读消息，如何向所有 parent 添加类“new_messages”？

示例输出:

<ul>
    <li data-total="0">Node 1</li>
    <li data-total="4" class="new_messages">Node 2</li>
    <li data-total="0" class="new_messages">Node 3 <!-- childs have new messages -->
        <ul>
            <li data-total="0">sub node 1</li>
            <li data-total="0" class="new_messages">sub node 2 <!-- childs have new messages -->
                <ul>
                    <li data-total="0">test node 1</li>
                    <li data-total="2" class="new_messages">test node 2</li>
                    <li data-total="7" class="new_messages">test node 3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-total="0">Node 4</li>
</ul>

谢谢

Answer 1

首先，您应该迭代所有 li DOM 元素。

您可以将 Array.from 方法与 forEach 结合使用，方法是传递一个应用于每个项目的回调 函数。

然后检查 data_total 是否大于 0，如果为真，则为 current 项设置 className 属性。

此外，我还创建了一个名为 checkIfChildsHaveMessages 的函数，它检查元素是否有子元素以及是否至少包含一个具有新消息的子元素。

function checkIfChildsHaveMessages(item){
  let childrens = item.querySelectorAll('ul li');
  if(childrens.length == 0)
    return item.getAttribute('data-total') > 0;
  return Array.from(childrens).some(ch => ch.getAttribute('data-total') > 0);
}

let li = document.getElementsByTagName('li');
Array.from(li).forEach(function(item){
  data_total = item.getAttribute('data-total');
  let childsHaveMessages = checkIfChildsHaveMessages(item);
  if(data_total > 0 || childsHaveMessages)
    item.className = "new_messages";
});
console.log(document.getElementsByTagName('ul')[0].innerHTML);

<ul>
    <li data-total="0">Node 1</li>
    <li data-total="4">Node 2</li>
    <li data-total="0">Node 3
        <ul>
            <li data-total="0">sub node 1</li>
            <li data-total="0">sub node 2
                <ul>
                    <li data-total="0">test node 1</li>
                    <li data-total="2">test node 2</li>
                    <li data-total="7">test node 3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-total="0">Node 4</li>
</ul>