jQuery 递归逻辑树

jQuery Recursive logic tree

本文关键字：递归 jQuery      更新时间：2023-09-26

我的问题是，我们如何使以下逻辑在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>

    再次单击父标签将得到以下结果：

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

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

    • $('#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></>");
    }
});

    您可以在 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)
    }
});

    参见 Fiddle at 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)
});

    这很好用。 

    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);
});
    相关文章：