Question

我有一个UL列表，其中数据总计为“新消息总数”：

<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>

如果孩子有未读的消息，如何向所有父母添加“ 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 的函数，该函数检查元素是否具有子元素，以及是否包含至少一个具有new messages的元素。

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>

Answer 2

例如可以工作：
$('li[data-total="0"]').addClass('new_messages');

如果只想添加CSS样式，则不需要类，而只需使用CSS属性选择器即可：

li[data-total="0"] { 
    background : red;
}

$('li[data-total="0"]')
  .addClass('new_messages')
  .parents('li')
    .addClass('new_messages');

.new_messages {
background : rgba(255,0,0,.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li data-total="0">Node 1</li>
    <li data-total="4">Node 2</li>
    <li data-total="1">Node 3
        <ul>
            <li data-total="1">sub node 1</li>
            <li data-total="2">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>

Answer 3

使用纯Javascript：

// Get all li elements
let list_items = document.querySelectorAll('li');

// Loop through all li items
for (let element of list_items) {

  // Check if it has child nodes, etc, add class if it does
  if (element.childElementCount > 0 || element.dataset.total > 0) {
    element.classList.add('new_messages')
  }
}

向包含新消息的父级添加粗体类

3 个答案: