How to add class to selective <li> in a generated menu

Posted by Vikram on Stack Overflow See other posts from Stack Overflow or by Vikram
Published on 2011-01-04T02:39:34Z Indexed on 2011/01/04 2:54 UTC
Read the original article Hit count: 420

Filed under:
|
|
|

Hi I am looking for a solution to add a class to every list item <li> which has a child item with a class of <span class="separator"> and a different class to <li> with an anchor link.

I use Joomla and the menu is being generated somewhat like this:

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

What I want is to add class "anclink" or "seplink" to the <li> depending on their child item so that the final output looks like below.

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

How can I achieve this using PHP or even a jQuery solution will be fine.

Kindly help.

© Stack Overflow or respective owner

Related posts about php

Related posts about jQuery