如何在jQuery UI的menufocus事件中获取当前聚焦菜单元素的id

解决方案 #

jQuery UI 的menufocus事件回调中，传入的ui是一个普通配置对象，你需要的元素信息存储在它的item属性中：ui.item就是当前获得焦点的菜单项对应的jQuery对象，这也是你在控制台看到S.fn.init>item>0>id路径的原因，其中S.fn.init就是jQuery对象的实例标识。

正确的ID获取写法如下：

$('#menu').menu();
$('#menu').on("menufocus", function(event, ui) {
    // 获取当前聚焦li的id（jQuery写法）
    console.log(ui.item.attr("id"));
    // 获取当前聚焦li的id（原生DOM写法）
    console.log(ui.item[0].id);
    // 如果需要获取li内部嵌套的div的id，可通过查找后代元素实现
    console.log(ui.item.children("div").attr("id"));
})

上面的代码可以正常拿到你需要的子菜单元素ID，不需要依赖$(this)（仅指向菜单根元素），也不需要替换为menuselect事件，符合你的使用要求。

内容的提问来源于stack exchange，提问作者DuhVir