Question

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

我的问题是，当孩子被送回时，我的代码会将其附加到所有孩子身上。

<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对我不强。

提前致谢。

TO TEST 从信号器类中检索数据。对于那些想要测试它的人，我已经为你做了一些按钮。

<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内的选择器太模糊了。因此，它将子节点附加到所有 #parentID ul，即<ul>节点后代的所有#parentID。

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

另一个想法是定位具有<ul>的{{1}}。我注意到你在与每个节点关联的所有元素上都使用相同的ID，因此#parentID也应该可以正常工作。

至于在整个地方使用重复的元素ID，大多数浏览器都足以容忍它，但你可以只使用类......

使用javascript创建树

1 个答案: