jquery - 使用 jQuery 自动为所有父菜单添加箭头

Question

我有简单的无序列表菜单。代码如下，或者您可以从 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>

我想使用 jQuery 添加此标记 <span class="arrow"></span>到所有包含子菜单、所有父菜单的菜单。在这种情况下，应将此代码添加到 Second 和 Second - 2 菜单链接之后，如下所示:

<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>...........

有什么建议吗？实现这一目标的最简单方法是什么？

谢谢!

Answer 1

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