如何获取 jQuery-ui 菜单元素 ID

Question

我有简单的菜单

<ul id="menu">
  <li id="test_li_id">
    <div id="test_div_id">Just one element</div>
  </li>
</ul>

<script>
$('#menu').menu();
$('#menu').on("menufocus", function(event, ui) {
    console.log(ui.id);
    console.log(ui[0].id);
    console.log($(ui).attr("id"));
    })
</script

所有这些都没有给我 id，我尝试了更多变体但没有成功。我怎样才能得到元素的id。我想ui 内部函数既不是 jQuery 对象也不是 DOM 对象。来自google chrome dev tools 我不知道如何获得它。它只是说id 不存在，但我在对象中看到它。路径看起来像S.fn.init>item>0>id

$(this) 给了我根元素，如果我有子菜单，则不适合。

附：是的，我需要“menufocus”而不是“menuselect”。

Answer 1

您需要使用ui.item[0].id 喜欢：

$('#menu').menu();
$('#menu').on("menufocus", function(event, ui) {
  console.log(ui.item[0].id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<ul id="menu">
  <li id="test_li_id">
    <div id="test_div_id">Just one element</div>
  </li>
</ul>

下次检查使用console.log(ui)你会看到所有节点列表