I have simple menu

<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

All of this don't give me id, I've tried some more variants without success. How can I get id of element. I suppose ui inside function neither jQuery object nor DOM object. From google chrome dev tools I can't figure how to get it. It just says that id doesn't exist, but I see it in object. And path looks like S.fn.init>item>0>id

$(this) gives me root element, and not suitable if i have submenus.

P.S. Yes, I need "menufocus" and not "menuselect".

CodePudding user response：

You need to use ui.item[0].id like:

$('#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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Next time for check use console.log(ui) you will see all list of node