修改

Question

您好我正在寻找一个解决方案，为每个列表项<li>添加一个类，其中包含一个类<span class="separator">的子项和一个带{}的不同类<li>链接。

我使用Joomla，菜单生成有点像这样：

<ul class="menu">
  <li class="item1"><a href="<!-- link goes here -->"><span>Home</span></a></li>
  <li class="parent item59"><span class="separator"><span>Demo</span></span></li>
  <li class="item62"><a href="<!-- link goes here -->"><span>Article</span></a></li>
  <li id="current" class="parent active item27"><a href="<!-- link goes here -->"><span>CMS</span></a>
    <ul>

      <li class="item50"><a href="<!-- link goes here -->"><span>The News</span></a></li>
      <li class="item48"><a href="<!-- link goes here -->"><span>Web Links</span></a></li>
      <li class="item65"><span class="separator"><span /></span></li>
      <li class="item49"><a href="<!-- link goes here -->"><span>News Feeds</span></a></li>
      <li class="item66"><span class="separator"><span /></span></li>
      <li class="item67"><span class="separator"><span /></span></li>
      <li class="item68"><span class="separator"><span /></span></li>

    </ul>
  </li>
  <li class="item71"><span class="separator"><span>Help</span></span></li>
</ul>

我想要的是将"anclink"或"seplink"添加到<li>，具体取决于他们的子项，以便最终输出如下所示。

<ul class="menu">
  <li class="item1 anclink"><a href="<!-- link goes here -->"><span>Home</span></a></li>
  <li class="parent item59 seplink"><span class="separator"><span>Demo</span></span></li>
  <li class="item62 anclink"><a href="<!-- link goes here -->"><span>Article</span></a></li>
  <li id="current" class="parent active item27" anclink><a href="<!-- link goes here -->"><span>CMS</span></a>
    <ul>

      <li class="item50 anclink"><a href="<!-- link goes here -->"><span>The News</span></a></li>
      <li class="item48 anclink"><a href="<!-- link goes here -->"><span>Web Links</span></a></li>
      <li class="item65 seplink"><span class="separator"><span /></span></li>
      <li class="item49 anclink"><a href="<!-- link goes here -->"><span>News Feeds</span></a></li>
      <li class="item66 seplink"><span class="separator"><span /></span></li>
      <li class="item67 seplink"><span class="separator"><span /></span></li>
      <li class="item68 seplink"><span class="separator"><span /></span></li>

    </ul>
  </li>
  <li class="item71 seplink"><span class="separator"><span>Help</span></span></li>
</ul>

如何使用PHP甚至jQuery解决方案来实现这一目标。

请帮助。

Answer 1

使用jQuery：

$('#menu > li:has( > span.separator )').addClass('seplink');
$('#menu > li:has( > a )').addClass('anclink');

或：

$('#menu > li > span.separator').parent().addClass('seplink');
$('#menu > li > a').parent().addClass('anclink');

编辑：当我离开这个解决方案时，我刚走出门，所以我没有机会注意到我非常赞成第二个解决方案，因为它使用有效的CSS选择器。

在支持querySelectorAll的浏览器中效果会更好。

Answer 2

没有jQuery：

var ul = document.getElementsByClassName("menu");
var li = ul[0].getElementsByTagName("li"); 
for ( var i = 0; i < li.length; i++ ){
    var class = li[i].className;
    class += ( li[i].childNodes[0].tagName.toUpperCase() == 'A' ) ? ' anclink' : ' seplink';
    li[i].className = class;
}

修改

因此，您可以使用http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/中定义的getElementsByClassName或使用其他方法，例如getElementsByTagName（在您的情况下，嵌套列表的根是第一个UL。）出于测试目的，我建议您将此代码粘贴到HTML文档的HEAD中。此外，您需要在窗口加载后调用此函数，因为您要在窗口的已加载元素上应用更改。

<script type="text/javascript">
window.onload = function(){
    var ul = document.getElementsByTagName("ul")[0];
    var li = ul.getElementsByTagName("li"); 
    for ( var i = 0; i < li.length; i++ ){
        var myClass = li[i].className;
        myClass += ( li[i].childNodes[0].tagName.toUpperCase() == 'A' ) ? ' anclink' : ' seplink';
        li[i].className = myClass;
    }

};
</script>

Answer 3

添加第二个答案，因为如果这是唯一目的，我建议不要加载整个jQuery库。

另一种方法是使用Sizzle，它是jQuery中包含的CSS选择器引擎。这是一个小得多的下载，因此，可能是一个体面的妥协。

你get the library，并按照以下方式使用它：

var li_span = Sizzle('#menu > li > span.separator'),
    li_a = Sizzle('#menu > li > a'),
    s = li_span.length,
    a = li_a.length;

while( s-- ) {
    if( li_span[ s ].className === 'separator' ) {
        li_span[ s ].parentNode.className += ' seplink';
    }
}
while( a-- ) {
    li_a[ a ].parentNode.className += ' anclink';
}

下载的文件是完整尺寸的，因此您需要缩小它。

Answer 4

嘿@Patrick和@Nabab没有一个解决方案适合我，但有些人如何设法解决这个脚本，即使在IE 6-9和Firefox中也能正常工作。我没有机会检查Opera，Chrome和Safari会稍后再试。

$(document).ready(function() {
    $('ul.menu li:not(:has(li))')
        .addClass(function() {
        return (
        ($('span.separator',this).length)
        ? 'seplink' : (($('a[href]',this).length)
        ? 'anclink' : null));
    });
});

这个剧本昨天是由一些慷慨的成员在这里作为这个问题的答案提供的。我无法得到他/她的名字，但不知道为什么后来它从答案列表中消失了。幸运的是，到那时我已经复制了它。我发布这个作为答案，因为它对我来说非常有效。

我无论如何都使用整个jQuery库，因为我的模板还有其他方面需要它。请使用此脚本，建议您是否看到我可能不知道的任何挑战。

如何在生成的菜单中向选择性<li>添加类</li>

4 个答案:

修改