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