Question

I have simple unordered list menu. Code is below or you can grab it from jsFiddle:

<ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a>
        <ul>
            <li><a href="#">Second - 1</a></li>
            <li><a href="#">Second - 2</a></li>
            <li><a href="#">Second - 3</a>
                <ul>
                    <li><a href="#">Aaa</a></li>
                    <li><a href="#">Bbb</a></li>
                    <li><a href="#">Ccc</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Third</a></li>
</ul>

I would like to use jQuery to add this markup <span class="arrow"></span> to all menus containing child menus, all parent menus. In this case this code should be added just after Second and Second – 2 menu link, like this:

<ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a><span class="arrow"></span>
        <ul>
            <li><a href="#">Second - 1</a></li>
            <li><a href="#">Second - 2</a></li>
            <li><a href="#">Second - 3</a><span class="arrow"></span>
                <ul>...........

Any suggestions what is the easiest way to achieve this?

Thanks!

Answer 1

$('li > ul').before('<span class="arrow"></span>');