javascript - 使用 javascript 创建一棵树

Question

我正在尝试使用 javascript 创建 TreeView 。基本上，当用户单击树中的 V 形时，它将触发 SignalR 去获取子项，一旦获得子项列表，它就会将它们发送回客户端，一次一个，以填充到 View 中。听起来很容易。

我的问题是，当一个 child 被送回时，我的代码会将其附加到所有 child 。

<ul class="treeview">
    <li id="1032">
        <i id="1032" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
        <a id="1032" href="#">Folder 1</a>
        <ul id="1032"></ul>
    </li>
    <li id="1018">
        <i id="1018" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
        <a id="1018" href="#">Folder 2</a>
        <ul id="1018"></ul>
    </li>
</ul>

当页面加载时，它看起来像这样。当 i 元素被单击时，我的 JavaScript 就会触发。除了最后一个方法之外，一切都按计划进行。

function addChild(parentID, childID, childName) {
            jQuery('<li id="' + childID + '"><i id="' +
            childID + '" class="tree-indicator glyphicon glyphicon-chevron-right"></i><a id="' +
            childID + '" href="#">' + childName + '</a><ul id="' + childID + '"></ul></li>').appendTo($("#" + parentID + " ul"));
        }

文件夹 1 有 3 个子文件夹。我希望它的结果是这样的；

<ul class="treeview">
<li id="1032">
    <i id="1032" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
    <a id="1032" href="#">Folder 1</a>
    <ul id="1032">
        <li id="1057">
            <i id="1057" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
            <a id="1057" href="#">Child 1</a>
            <ul id="1057"></ul>
        </li>
        <li id="4563">
            <i id="4563" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
            <a id="4563" href="#">Child 2</a>
            <ul id="4563"></ul>
        </li>
        <li id="1534">
            <i id="1534" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
            <a id="1534" href="#">Child 3</a>
            <ul id="1534"></ul>
        </li>
    </ul>
</li>
<li id="1018">
    <i id="1018" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
    <a id="1018" href="#">Folder 2</a>
    <ul id="1018"></ul>
</li>
</ul>

实际发生的事情是这样的；

<ul class="treeview">
<li id="1032">
    <i id="1032" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
    <a id="1032" href="#">Folder 1</a>
    <ul id="1032">
        <li id="1057">
            <i id="1057" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
            <a id="1057" href="#">Child 1</a>
            <ul id="1057">
                <li id="4563">
                    <i id="4563" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
                    <a id="4563" href="#">Child 2</a>
                    <ul id="4563">
                        <li id="1534">
                            <i id="1534" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
                            <a id="1534" href="#">Child 3</a>
                            <ul id="1534"></ul>
                        </li>
                    </ul>
                </li>
                <li id="1534">
                    <i id="1534" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
                    <a id="1534" href="#">Child 3</a>
                    <ul id="1534"></ul>
                </li>
            </ul>
        </li>
        <li id="4563">
            <i id="4563" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
            <a id="4563" href="#">Child 2</a>
            <ul id="4563">
                <li id="1534">
                    <i id="1534" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
                    <a id="1534" href="#">Child 3</a>
                    <ul id="1534"></ul>
                </li>
            </ul>
        </li>
        <li id="1534">
            <i id="1534" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
            <a id="1534" href="#">Child 3</a>
            <ul id="1534"></ul>
        </li>
    </ul>
</li>
<li id="1018">
    <i id="1018" class="tree-indicator glyphicon glyphicon-chevron-right"></i>
    <a id="1018" href="#">Folder 2</a>
    <ul id="1018"></ul>
</li>
</ul>

我很确定这将是一件小事。我已经看了太久了，我的大脑相信一切都好。这也可能是因为 jQuery 对我来说不强。

提前致谢。

测试数据是从信号器类中检索的。对于那些想测试一下的人，我为您制作了一些按钮。

<button onclick="addChild(1032, 1057, 'Child 1')">Add Child 1</button>
<button onclick="addChild(1032, 4563, 'Child 2')">Add Child 2</button>
<button onclick="addChild(1032, 1534, 'Child 3')">Add Child 3</button>

希望这能有所帮助。

Answer 1

如K Scandrett注意到， appendTo 里面的选择器太模糊了。结果，它将子节点附加到all #parentID ul ，这就是全部<ul>是 #parentID 的后代节点。

要解决此问题，您可以将选择器限制为父级的直接后代，如下所示:appendTo($('#' + parentID + ' > ul')) 。只要<ul>您想要的直接在#parentID内节点，这会起作用。

另一个想法是瞄准 <ul>有 #parentID 。我注意到您在与每个节点关联的所有元素上粘贴了相同的 ID，因此 appendTo($('ul#' + parentID))应该也能工作。

至于在各处使用重复的元素 ID，大多数浏览器都足以容忍它，但您可以只使用类...