jQuery递归逻辑树

Question

我的问题是，我们如何让下面的逻辑在jQuery中起作用。我从 HTML 页面上的这个片段开始：

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

功能：

所以当我点击 link 时，我想检查

是否有 child class。如果是，则将 <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>

再次点击 Parent 标签会出现：

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

另外：

我的麻烦是我希望这递归地发生。意思是，单击 "Child" 文本将检查 child <li> class 是否有子 <ul> 并向其添加 <li>..如果不是，先加<ul>，再加<li>。这应该持续到永远。

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

EDIT — 刚注意到，我的代码根本不起作用。不知道为什么。这就是我所做的：

$('#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 让我澄清一下我在寻找什么 —

一个列表，向每个被单击的元素添加 child。

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></>");
    }
});

Answer 2

您可以在 jQuery 中使用 .children() 检查。这将以递归方式工作，因为它会相对地检查 children。

$('li').click(function () {
    // Check if an inner list exists
    if ($(this).children('ul').length) {
        $(this).children('ul').first().append(child)
    }    
    else {
        $(this).append(newList)
    }
});

Answer 3

见 fiddle http://jsfiddle.net/et79cuj5/33/

$('#intro').on('click', function () {
    var hasNestedList = $(this).parents('li').has('ul');
    var parentItem = $(this).parents('li');
    var newChildItem = '<li><a href="#">Child</a></li>';
    var newChildList = '<ul></ul>'
    var insertionPoint = parentItem

    if (hasNestedList.size() === 0) {
        parentItem.append(newChildList);
    }
    insertionPoint = $(this).parents('li').find('ul');
    insertionPoint.append(newChildItem)
});

Answer 4

这很好用。

var add_child = function (element) {
    if($(element).parent().find("ul").html()){
        $(element).parent().find("ul").first().append("<li><a href='#'>Child</a></li>");
    } else{
        $(element).parent().append("<ul><li><a href='#'>Child</a></li><ul>");
    }
}

$(document).on('click', 'a', function(){
    add_child(this);
});

jQuery递归逻辑树

jQuery Recursive logic tree

html

javascript

jquery