Kendo Treeview / jQuery：循环遍历无序列表中的孩子的孩子答案

【问题标题】：Kendo Treeview / jQuery: Looping through children of children in unordered listKendo Treeview / jQuery：循环遍历无序列表中的孩子的孩子
【发布时间】：2012-12-28 14:52:14
【问题描述】：

我正在尝试获取所选节点中所有子节点的 innerText。

因此，如果用户单击其中一个 UL，我想获取该 UL 和任何子项（UL 和/或 LI）的文本并将其写入控制台。

$("#removeNode").click(function (e) {
    var treeview = $("#treeview").data("kendoTreeView");
    var selectedNode = treeview.select();

    console.log(selectedNode.text());
});

上面的 console.log 以“LLC-A Alpine LLC-B Seminole LLC-C Commons Chase”为例，但我需要分别列出：

有限责任公司-A
高山
LLC-B
塞米诺尔
LLC-C
公地
追逐

示例无序列表：

<ul class="k-group" style="border-style: none;">
<li class="k-item k-first k-last" data-id="BASE" id="BASE" data-uid="31f1f67d-89f9-40e7-b646-29a9597056c7">
    <div class="k-top k-bot"><span class="k-icon k-minus"></span><span class="k-in" data-expanded="true">Test</span></div>
    <ul class="k-group" style="border-style: none;">
        <li class="k-item k-last" data-uid="aec27c8c-ca89-49e8-bfd3-0cede391a55e">
            <div class="k-bot"><span class="k-icon k-minus"></span><span class="k-in" data-expanded="true">LLC-A</span></div>
            <ul class="k-group" style="border-style: none;">
                <li class="k-item" data-uid="78810005-52ad-42ae-92dd-7245b6960eb6">
                    <div class="k-top"><span class="k-icon k-minus"></span><span class="k-in" data-expanded="true">LLC-B</span></div>
                    <ul class="k-group" style="border-style: none;">
                        <li class="k-item" data-uid="bd9866fb-c997-41ae-a4c2-d5576f391a9c">
                            <div class="k-top"><span class="k-icon k-minus"></span><span class="k-in" data-expanded="true">LLC-C</span></div>
                            <ul class="k-group" style="border-style: none;">
                                <li class="k-item" data-uid="31c48db8-c9d2-4f40-b2ba-f42197811e56">
                                    <div class="k-top"><span class="k-icon k-minus"></span><span class="k-in" data-expanded="true">LLC-D</span></div>
                                    <ul class="k-group" style="border-style: none;">
                                        <li class="k-item k-last" data-uid="778c3538-7fbc-4daf-8b7d-b6f3cca5b6fd">
                                            <div class="k-bot"><span class="k-in">Beacon</span></div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="k-item k-last" data-uid="f9e673c0-902c-4ede-b5c4-ccd2232391a4">
                                    <div class="k-bot"><span class="k-in">Willows</span></div>
                                </li>
                            </ul>
                        </li>
                        <li class="k-item" data-uid="c0f42f30-cb84-4f66-a37e-e96a0b0cfcbf">
                            <div class="k-mid"><span class="k-in">Chase</span></div>
                        </li>
                        <li class="k-item k-last" data-uid="7b7053bd-38ee-4312-9e78-484b4da48e0d">
                            <div class="k-bot"><span class="k-icon k-minus"></span><span class="k-in" data-expanded="true">LLC-F</span></div>
                            <ul class="k-group" style="border-style: none;">
                                <li class="k-item" data-uid="c0dad4b9-1839-4dca-ac1f-2fe9fc2df5ed">
                                    <div class="k-top"><span class="k-in">Seminole</span></div>
                                </li>
                                <li class="k-item k-last" data-uid="8c4073be-4b8c-4036-a85c-efe36bda1466">
                                    <div class="k-bot"><span class="k-in">Commons</span></div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="k-item k-last" data-uid="39644343-4b0c-4be0-be08-701f63096195">
                    <div class="k-bot"><span class="k-in">Alpine</span></div>
                </li>
            </ul>
        </li>
    </ul>
</li>

【问题讨论】：

很难准确地遵循您想要做的事情。（对于初学者，我在标记中的任何地方都看不到 kendoTreeView。）除此之外，我没有看到您说应该为您的节点打印的节点之间有任何明显的相似之处。它们不是同一个元素的所有子元素。它们也不是相同的元素类，甚至也不是相同的 HTML5 数据属性。请澄清标记并详细说明目标......
我将举一个我正在尝试做的例子。如果我单击文本“LLC-F”，我想在控制台中列出它下面的每个项目。使用我当前的单击功能，当我将其输出到控制台时，我会在一行中获得所有名称。
在我的点击功能中，当我执行 console.log 这就是我在控制台中得到的内容： innerText: "LLC-A↵LLC-B↵LLC-C↵Seminole↵Beacon↵ Alpine↵" 如何循环获取每个单独的名称？
您根据什么标准找到这些节点？看起来你只是在获取节点的文本，它只是给你一个字符串。似乎更好的方法是拥有某种可以依赖的结构。例如，LLC-C 和 Commons 之间的关系是什么，这似乎与 LLC-F AFAICT 相关。 Chase 也完全处于另一个 DOM 路径中。如果你有条件和结构，你可以使用 jQuery 的选择器来找到它们。否则，您将看到脆弱的正则表达式拆分字符串处理。

标签： jquery kendo-ui kendo-treeview

【解决方案1】：

文本 jQuery 函数将返回 DOM 节点及其所有子节点的内部文本。在这种特殊情况下，您可以只拆分文本，然后将其加入。这就是我的意思：

http://jsbin.com/edahit/1/edit

【讨论】：

【解决方案2】：

这就是我最终做的事情，它似乎正在工作....到目前为止。

           var lis = $(".k-in", selectedNode);

            for (var i = 0; i < lis.length; i++) {
                var name = lis[i].innerText;
                console.log(name);
            }

【讨论】：