Question

I’m having trouble finding the right selector for nested ULs. I have the following code:

<ul class="menu">
  <li><a href="">top link 1</a></li>
  <ul class="menu">
    <li><a href="">sub link 1</a></li>
    <li><a href="">sub link 2</a></li>
    <li><a href="">sub link 3/a></li>
  </ul></li>
  <li><a href="">top Link 2</a></li>
  <li><a href="">top Link 3</a></li>
</ul>

This menu system is generated by our CMS so I’m trying to use jQuery to wrap only the inner “top link” anchors with <strong><span> to add more styling.

I’ve tried multiple versions of:

$('ul.menu:first li a').wrapInner('<strong><span>');

But I havent’ had much luck. It seems to wrap all anchors inside of the UL. I’m sure there is some parent/child selector that I need to use but I’m not sure which one.

Answer 1

$('ul.menu:first>li a').wrapInner('<strong><span>');

Practice: Fiddle