javascript - jQuery 递归逻辑树

Question

我的问题是，我们如何使以下逻辑在 jQuery 中工作。我从 HTML 页面上的这段代码开始:

<ul>
    <li><a href="#">Parent</a></li>
</ul>

功能:

因此，当我单击链接时，我想检查

是否有子类。如果是，则附加 <li><a href="#">Child</a></li>给那个 child <ul元素，在 <a> 之后标签。不过，如果没有 child <ul>找到的话，首先要创建一个<ul>标签，然后添加 <li><a href="#">Child</a></li>到新创建的<ul>标签。

因此，单击上面的示例片段应该会给出以下结果:

<ul>
    <li><a href="#">Parent</a>
        <ul>
            <li><a href="#">Child</a></li>
        </ul>
    </li>
</ul>

第二次单击父标签将显示:

<ul>
    <li><a href="#">Parent</a>
        <ul>
            <li><a href="#">Child</a></li>
            <li><a href="#">Child</a></li>
        </ul>
    </li>
</ul>

另外:

我的问题是我希望这种情况递归发生。意思是，单击“Child”文本将检查子项是否 <li>类有一个子 <ul>并添加<li>对此..如果没有，则添加 <ul>先然后<li> 。这应该持续到永远。

这是我尝试过的 - http://jsfiddle.net/arsalanbashir/et79cuj5/

编辑 - 刚刚注意到，我的代码根本不起作用。不知道为什么。这就是我所做的:

$('#intro').click(function(){
    if($($('#list').length)){
        $('#list').append("<li><a>SOMETHING</a></li>");
    } else{
        $('.node').append("<ul id='#list'><li><a>SOMETHING</a></li></ul>");
    }
});

这是 HTML:

<ul>
    <li class="node">
        <a id="intro" href="#">Introduction</a>
    </li>
</ul>

编辑 2 让我澄清一下我在寻找什么 -

将子元素添加到单击的每个元素的列表。

Answer 1

$('#intro').click(function(){
    console.log('clicking');
    if($('#list').length){
        $('#list').append("<li><a>SOMETHING</a></li>");
                 }else{
        $('.node').append("<ul id='#list'><li><a>SOMETHING</a></li></>");
    }
});