Question

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

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

功能：

所以当我点击链接时，我想检查

是否有子类。如果是，请在<li><a href="#">Child</a></li>标记之后将<ul附加到该子<a>元素。但是，如果找不到子<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>

另外：

我的麻烦在于我希望这是递归发生的。这意味着，单击“子”文本将检查子<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></>");
    }
});

Answer 2

您可以在jQuery中使用.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

在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递归逻辑树

4 个答案: