you can do this with a little JQ .
A. first you need to find the text
form each a
that corresponds to each li
.
to do that use the text()
function ( info here )
B. then if you have more than one word as text
you need to join
the words with -
using the replace()
method (info here).
this is because if you don't join the words ( put "-" between them ), for example for text top 2nd menu
then the li
will have 3 separate classes instead of only one. so by using the replace()
method you get the wanted result, respectively top-2nd-menu
C. and then add class to your li
with attr("class","nav-" + addcl)
( info here )
this way you add whichever word you want before the text ( addcl
) you got from points A and B
$("li").each(function(){
var litext = $(this).children("a").text()
var addcl = litext.replace(/s/g, '-').toLowerCase()
$(this).attr('class', 'nav-' + addcl);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">men</a>
<ul>
<li><a href="#">new arrival</a></li>
<li><a href="#">about</a></li>
</ul>
</li>
<li><a href="#">top 2nd menu</a>
<ul>
<li><a href="#">go</a></li>
<li><a href="#">hello menu</a></li>
</ul>
</li>
</ul>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…