How to add class to selective <li> in a generated menu
- by Vikram
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.
