Добавить жирный класс к родителю, который содержит новые сообщения
Если метод equals() присутствует в классе java.lang.Object, и ожидается, что он проверяет эквивалентность состояния объектов! Это означает, что содержимое объектов. В то время как ожидается, что оператор == проверяет, что фактические экземпляры объекта одинаковы или нет.
Пример
Рассмотрим две различные ссылочные переменные, str1 и str2:
str1 = new String("abc");
str2 = new String("abc");
Если вы используете equals()
System.out.println((str1.equals(str2))?"TRUE":"FALSE");
, вы получите выход как TRUE, если вы используете ==.
System.out.println((str1==str2) ? "TRUE" : "FALSE");
Теперь вы получите вывод FALSE в качестве вывода, потому что оба str1 и str2 указывают на два разных объекта, хотя оба они имеют одинаковое строковое содержимое. Именно из-за new String() каждый новый объект создается каждый раз.
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')
}
}
Например, будет работать:
$('li[data-total="0"]').addClass('new_messages');
Если вы просто хотите добавить стиль CSS, вам не нужен класс, но вы можете просто использовать селектор атрибутов CSS: [ 119]
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> Прежде всего, вам следует перебрать все элементы li DOM .
Вы можете сделать это, используя метод Array.from в сочетании с forEach, передав функцию обратного вызова , которая применяется для каждого элемента.
Затем проверьте, если data_total больше 0, и если это правда, просто установите свойство 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>