在 Jquery 中单击第一级节点时，必须删除树视图只有最后一级节点答案

【问题标题】：Tree View only last level nodes has to be removed when the first level node is clicked in Jquery在 Jquery 中单击第一级节点时，必须删除树视图只有最后一级节点
【发布时间】：2015-05-20 12:54:12
【问题描述】：

每当我点击复选框时，它包含任何子“UL”，这个“LI”是最后一个，然后，我需要复制这个 UL 子只有“SPAN”需要复制并粘贴到目标文件夹.我尝试了下面的代码。

目标：每当我按下它包含任何子 ul 的复选框时，如果它是最后一个，那么，它应该被复制。

在这个列表上，如果我点击Node 1.1.1', Node 1.1.2 etc，那么它应该只复制节点1.1.1、节点1.1.2等

在这个列表中，如果我点击 Node 1.1，那么它应该只复制节点 1.1.1、节点 1.1.2 等。

在这个列表上，如果我点击 Node 1.2, Node 1.3 etc[Here It does not have descendant]，那么它应该只复制节点 1.2、节点 1.3 等。而不是“节点 1.1”，因为它有后代。

在这个列表上，如果我点击，'Node 1'，那么，它应该复制 Node 1.1.1, Node 1.1.2, Node 1.1.3, Node 1.1.4 and Node 1.1.5 然后 Node 1.2[not 1.1 because it has descendant], Node 1.3, Node 1.4, Node 1.5 and Node 1.6

有什么想法吗？请。

<div class="form-group floatleft10" id="tree">
    <ul>
        <li>
            <input type="checkbox" value="Node 1" /><span>Node 1</span>
            <ul>
                <li>
                    <input type="checkbox" value="Node 1.1" /><span>Node 1.1</span>
                    <ul>
                        <li>
                            <input type="checkbox" value="Node 1.1.1" /><span>Node 1.1.1</span></li>
                        <li>
                            <input type="checkbox" value="Node 1.1.2" /><span>Node 1.1.2</span></li>
                        <li>
                            <input type="checkbox" value="Node 1.1.3" /><span>Node 1.1.3</span></li>
                        <li>
                            <input type="checkbox" value="Node 1.1.4" /><span>Node 1.1.4</span></li>
                        <li>
                            <input type="checkbox" value="Node 1.1.5" /><span>Node 1.1.5</span></li>
                    </ul>
                </li>
                <li>
                    <input type="checkbox" value="Node 1.2" /><span>Node 1.2</span>

                </li>
                <li>
                    <input type="checkbox" value="Node 1.3" /><span>Node 1.3</span>

                </li>
                <li>
                    <input type="checkbox" value="Node 1.4" /><span>Node 1.4</span>

                </li>
                <li>
                    <input type="checkbox" value="Node 1.5" /><span>Node 1.5</span>

                </li>
                <li>
                    <input type="checkbox" value="Node 1.6" /><span>Node 1.6</span>

                </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" value="Node 2" /><span>Node 2</span>
            <ul>
                <li>
                    <input type="checkbox" value="Node 2.1" /><span>Node 2.1</span>

                </li>
                <li>
                    <input type="checkbox" value="Node 2.2" /><span>Node 2.2</span>

                </li>
            </ul>
        </li>
    </ul>
</div>


<div class="form-group floatleft13" id="checkbox-content"></div>

jQuery

(function ($) {

    $('div#tree input[type="checkbox"]').click(function () {

        var $list = $("div#checkbox-content");
        var $currElem = $(this).clone();
        var $currElemNext = $(this).next().clone();
        var $curElemVal = $(this).attr("value");
        var $curElemValAdd = "";
        var $curElemValNext = $(this).next().text();
        if ($(this).parent().children("ul").children("li").prop('tagName') == undefined && $(this).parent().children("ul").prop('tagName') == undefined) {
            console.log($(this).val());
            $list.append($('<div data-value="' + $(this).val() + '"></div>').append($currElemNext));
            var $thisTempAdd = $(this).val();
            var $currElemSiblngs = $(this).parent().clone();
            //$currElemSiblngs.find(":checkbox").remove();
            var newCopiedElements = $currElemSiblngs.find("span.daredevel-tree-label").clone();
            var $tempVal = $(this).html();
            //$curElemValAdd += '<div class="try"><span>'+ $tempVal +'</span></div>';
            console.log("Here");
            $list.find("div").filter(function () { return $(this).data('value') === $thisTempAdd });
        }
            /// Second Level

        else if ($(this).parent().children("ul").children("li").prop('tagName') == "LI" && $(this).parent().children("ul").prop('tagName') == "UL") {
            //console.log();
            var $currParent = $(this).parent().prop('tagName');
            if ($(this).parent().has('ul') && $(this).parent().children('ul').parent().prop('tagName') == $currParent) {
                console.log("dshdsdhdd");
                var $currElemSiblngs = $(this).parent().children('ul').children("li");
                //$currElemSiblngs.find(":checkbox").remove();
                var newCopiedElements = $currElemSiblngs.find("span.daredevel-tree-label").clone();
                var $curElemValAdd = "";
                $(newCopiedElements).each(function () {
                    var $tempVal = $(this).html();
                    console.log($(this).text());
                    $curElemValAdd += '<div data-value="' + $(this).text() + '"><span>' + $tempVal + '</span></div>';

                });
                $list.append($curElemValAdd);
            }
        }
            /// First Level
        else if ($(this).parent().children("ul").children("li").children("ul").children("li").prop('tagName') == "LI") {
            var $currParent = $(this).parent().prop('tagName');
            if ($(this).parent().children("ul").children("li").children("ul") && $(this).parent().children("ul").children("li").children("ul").children("li").prop('tagName') == $currParent) {
                console.log("dshdsdhddHHHHHHHHHHH");
                var $currElemSiblngs = $(this).parent().children("ul").children("li").children("ul");
                //$currElemSiblngs.find(":checkbox").remove();
                var newCopiedElements = $currElemSiblngs.find("span.daredevel-tree-label").clone();
                var $curElemValAdd = "";
                $(newCopiedElements).each(function () {
                    var $tempVal = $(this).html();
                    console.log($(this).text());
                    $curElemValAdd += '<div data-value="' + $(this).text() + '"><span>' + $tempVal + '</span></div>';

                });
                $list.append($curElemValAdd);
            }

        } else if (!this.checked) {
            //alert("new function");
            var thisTemp = $(this).val();
            //console.log(thisTemp);
            $list.find("div").filter(function () { return $(this).data('value') === thisTemp }).remove();
        }
        else if (this.checked) {
            $list.append($('<div></div>').append($currElemNext));
            //$list.append($currElemNext);
        } else {
            //hide to the right
            $list.find('span').filter(function () {
                console.log($curElemVal);
                console.log($curElemValAdd);
                return ($(this).text() === $curElemVal || $(this).text() === $curElemValAdd)
            }).slideUp("fast", function () {
                //$(this).next('span').remove();
                $(this).remove();
                //alert("2");
            });
        }
    });
})(jQuery);

【问题讨论】：

你能试着更清楚地表达自己吗？预期的行为是什么？请为社区提供一些用例！这是一个小提琴：jsfiddle.net/167bqchz
@bernland，是的，我在这里表达了我的观点jsfiddle.net/167bqchz/1

标签： javascript jquery html

【解决方案1】：

更新

看看这个：https://jsfiddle.net/b36921na/3/

(function ($) {

    $('div#tree input[type="checkbox"]').click(function () {
        $('#checkbox-content').text('');
        printNodeValues($(this));

    });

})(jQuery);

function printNodeValues(element) {

    if (element.parent().children('ul').length > 0) {
        element.parent().children('ul').children('li').each(function() {
            printNodeValues($(this).children('input'));
        });  
    } else {
        $('#checkbox-content').html($('#checkbox-content').html() + "<br />" + element.val());
    }
}

以上代码使用递归。如果这不是您一直在寻找的，那么请让我知道单击节点 1、节点 1.1、节点 1.1.1、...、节点 1.1.5、节点 1.2、...时究竟应该发生什么、Node 1.6、Node 2、Node 2.1 和 Node 2.2，我很乐意为您提供帮助。

【讨论】：

谢谢！它仍然需要一些额外的代码。在“瞄准”之后，我在这篇文章上做了我的 cmets。请参考。另外，请您从复制的文件夹中执行删除功能。我的意思是当我取消选中相同的输入复选框时，我应该删除复制到 div 的相同内容。请