访问已检查节点的名称，而不访问所有子节点的名称

Question

我正在使用jstree，我想访问HTML树中所有选中节点的ID和名称，以便将它们一起显示在摘要中。

这是我的代码：

$("#summary").click(function () {
    var id_arr = new Array();
    var text_arr = new Array();
    $("#tree").jstree('get_checked').each(function (index) {
        id_arr.push($(this).attr("id"));
        text_arr.push($(this).text());
    });
    alert("Your Selection: " + id_arr.join() + " " + text_arr.join());
});

虽然id_arr.push($(this).attr("id"));仅返回相关被检查节点的ID（当父节点的所有子节点都被检查时，仅父节点ID），但text_arr.push($(this).text());返回所有被检查节点名称（被检查父节点的名称及其所有子节点的名称）。

你知道如何只返回被选中的家长的名字吗？我已经考虑过在树节点中添加一个隐藏的HTML属性（如<li id="123"> <a title="ID:123" hidden="name of node 123">name of node 123</a></li>），并使用.attr（"隐藏"）而不是访问node.text（）

任何帮助都将不胜感激！

更新：

树的HTML（我真正的树相当广泛，但我认为这棵树可以）：

<div id="tree">
    <li id="123"> <a title="ID:123">tree</a>
        <ul>
            <li id="234"> <a title="ID:234">leaf tree</a>
                <ul>
                    <li id="345"> <a title="ID:345">oak</a>
                        <ul>
                            <li id="456"> <a title="ID:456">white oak</a></li>
                            <li id="567"> <a title="ID:567">German oak</a></li>
                        </ul>
                    </li>
                    <li id="678"> <a title="ID:678">lime</a></li>
                </ul>
            </li>
            <li id="789"> <a title="ID:789">conifer</a>
                <ul>
                    <li id="890"> <a title="ID:890">pine</a></li>
                    <li id="901"> <a title="ID:901">spruce</a></li>
                </ul>
            </li>       
        </ul>
    </li>
</div>

示例：选择"oak"时，返回值应仅为"345 oak"，而不是"345 oake white oak German oak"。

顺便说一句，我关于"隐藏"的想法不起作用，因为其中写入的元素是隐藏的。

Answer 1

我找到了一个解决方案：

text_arr.push($(this).find("a:first").text());

text（）的结果是一个字符串，包含所有匹配元素的组合文本；在这种情况下，$（this）引用的元素的li标记之间包含的所有文本，包括子节点的文本。

通过添加.find("a:first").text()，字符串中只包含第一个标记之间的文本。