Question

I have a unordered list with links and sublinks. I’d like to prepend a '»' character in front of the sublinks in the list. I could probably do this with CSS via list-style-image:url but I’d rather just have text. So far I have tried prepend without much success.

HTML:

<nav>
<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <ul>
        <li><a href="#">sublink link 1</a></li>
        <li><a href="#">sublink link 2</a></li>
    </ul>
    <li><a href="#">link 3</a></li>
</ul>
</nav>

And I am using this code:

 $("ul li li").each(function() {
    $(this).closest('li').prepend("»").html();
   });

If I take away one level of list items and prepend to all list items, then it works but viewing in web inspector, the » character still has quotes around it. I also tried various incarnations of what appeared for closest such as li a but that did not make a difference either. I’m not getting any syntax errors so not sure what I am doing wrong.

I have a Fiddle here.

Answer 1

Why not some css?

ul ul li:before {
 content: '»';   
}

Using JavaScript to modify the UI for something like this is a waste of resources. This is subjective without knowing your actual use case.