0

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

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

谢谢。

4

4 回答 4

2 
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";

工作演示

于 2012-07-25T07:22:06.693 回答
1

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

请参阅此示例。

于 2012-07-25T07:23:05.923 回答
0

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

$("li").each(function() { 
  if ($(this).find("a").text() == "") 
    {
     $(this).css('display','none');
    }
});
于 2012-07-25T07:21:45.610 回答
0

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

$('.sub-menu a').each(function () {
    if (this.innerHTML == " ") {
        this.parentNode.style.visibility = 'hidden';
    }
})
于 2012-07-25T07:26:53.707 回答