javascript - 识别 "Aria-Selected"状态 - Jquery

Question

我正在为我正在开发的应用程序使用 Kendo-UI 的拖放 TreeView 。

我希望将一些文本附加到选定的列表项。

我在文档中找不到任何内容，并且很难选择合适的项目。

这是 Kendo-UI 代码:

 <script>
            $("#treeview-left").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Furniture", expanded: true, items: [
                        { text: "Tables & Chairs" },
                        { text: "Sofas" },
                        { text: "Occasional Furniture" }
                    ] },
                    { text: "Decor", items: [
                        { text: "Bed Linen" },
                        { text: "Curtains & Blinds" },
                        { text: "Carpets" }
                    ] }
                ]
            });

            $("#treeview-right").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Storage", expanded: true, items: [
                        { text: "Wall Shelving" },
                        { text: "Floor Shelving" },
                        { text: "Kids Storage" }
                    ]
                    },
                    { text: "Lights", items: [
                        { text: "Ceiling" },
                        { text: "Table" },
                        { text: "Floor" }
                    ]
                    }
                ]
            });
        </script>

这是生成的代码片段(注意“aria-select='true'”，这是因为我已经选择了该元素，现在我想将文本附加到该元素):

<li role="treeitem" class="k-item" data-uid="82bceebe-f6a8-4d44-80ec-76f4b3db5041" aria-selected="true" id="treeview-left_tv_active">
<div class="k-top">
   <span class="k-icon k-plus" role="presentation"></span>
   <span class="k-in k-state-selected">Alberta</span>
</div>
<ul class="k-group" style="display:none" role="group">.....</ul>
</li>

这是我此时的代码，我尝试了其他一些方法，但又恢复到这个，我知道这是不正确的:

 <script>
    $(function () {
        $(".k-treeview li:first").click(function () {
            $(this).append("test");
        });
    });
</script>

感谢任何帮助。

Answer 1

aria 属性是为了可访问性，并不是真正用于其他目的。

您可以使用select event并访问 e.node 中选定的元素:

$("#treeview").kendoTreeView({
    dataSource: ds,
    select: function(e) {
        var model = this.dataItem(e.node);
        model.set("text", model.get("text") + "test");
    }
})

你可以玩一下here .

如果您想在其他时间获取所选节点，请使用select method .