Question

假设我有一个如下编码的垂直菜单：

<ul class="sub-menu">
 <li id="menu-item-1" class="menu-item">
  <a href="/page1">Page1</a>
 </li>
 <li id="menu-item-2" class="menu-item">
  <a href="/page2"> </a>
 </li>
 <li id="menu-item-3" class="menu-item">
  <a href="/page3">Page3</a>
 </li>
</ul>

如您所见，page2的锚元素不包含任何文本。因此，我想从菜单中隐藏它。所以我正在寻找一个类似这样的javascript解决方案：

if (content of anchor tag equals " ") then 
set anchor's parent list element css to visiblity:hidden;

请注意，我不能在此文件中使用document.getElementById，因为列表ID是自动生成的，可能会随时间而变化。那么如何获取锚标记的内容并设置正确的列表项的CSS？

感谢。

Answer 1

var link=document.getElementsByTagName("a");
for(var i=0;i<link.length;i++)
if(link[i].innerHTML.replace(/^\s+|\s+$/g, "")==='')
link[i].parentNode.style.display="hidden";

<强> Working Demo

Answer 2

您可以使用getElementByTagName('li')，然后测试class="menu-item'

请参阅此sample。

Answer 3

如果您使用的是jQuery，可以执行以下操作：

$("li").each(function() { 
  if ($(this).find("a").text() == "") 
    {
     $(this).css('display','none');
    }
});

Answer 4

你可以使用这样的东西..

$('.sub-menu a').each(function () {
    if (this.innerHTML == " ") {
        this.parentNode.style.visibility = 'hidden';
    }
})

通过Javascript基于内容更改元素css

4 个答案: