有没有办法隐藏具有空 div 的 <li> 元素的项目符号

debugcn 发表于 Dev

akvickyit7

我正在动态生成 li 元素。某些 li 元素的 div 为空。喜欢

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

我不想在 ui 上显示第三个 li 元素项目符号，但想显示其他两个 li 项目符号。有没有什么办法解决这一问题？

谢谢阿米特

TJ克劳德

你说过你正在创造元素。如果是这样，那么li当divset 为空时，请忽略它或对其应用一个类list-style: none。

如果您事后这样做，那么在不更改结构、添加类等的情况下，我想不出一个基于 div 为空的 CSS 解决方案（而不是它始终是第三项，即我确定不是问题）。

JavaScript 解决方案很简单，但我不喜欢为此使用 JavaScript。

const items = document.querySelectorAll(".mybuttons li");
for (const item of items) {
  if (!item.textContent.trim()) {
    item.style.listStyle = "none";
  }
}

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

或者仅使用 ES5：

var items = document.querySelectorAll(".mybuttons li");
for (var n = 0; n < items.length; ++n) {
  if (!items[n].textContent.trim()) {
    items[n].style.listStyle = "none";
  }
}

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

我不应该在style.listStyle上面使用，我应该做我在上面第一段中所说的并使用一个类：

const items = document.querySelectorAll(".mybuttons li");
for (const item of items) {
  if (!item.textContent.trim()) {
    item.classList.add("empty");
  }
}

.empty {
  list-style: none;
}

<ul class="mybuttons">
   <li class="mybutton"><div>kkk</div></li>
   <li class="mybutton"><div>llll</div></li>
   <li class="mybutton"><div></div></li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。