计数没有CSS类的子菜单项jQuery

Question

The great Google and SO didn't render search results regarding this. Some were similar but didn't quite get me there.

I am in need of making a classless submenu that will attach a style attribute to each individual <li> in the sub <ul> in order to set a min-width property based on the number of sub list items.

The HTML

<nav>
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT COMPANY</a></li>
  <li>
    <a href="#" class="sub">ABOUT PRODUCT</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>
  <li><a href="#">GETTING STARTED</a></li>
  <li>
    <a href="#" class="sub">PATIENT SUPPORT</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#">eUPDATES</a></li>
</ul>
</nav>

The JavaScript

$('.sub').text(function() {
    var count = $(this).next().find('li').length;
    var totalwidth = count * 115;
    $(this).next().find('li').parent('ul').attr('style','min-width:'+totalwidth+'px');
});

I need to be able to do this without searching based off the class "sub". I've tried a few times, but none of it seems as powerful as the code I'm currently using. The backend developer I'm working with is requiring it to all be simple <ul><li></li></ul> structure with no classes.

If anyone can help point me in the right direction on this, I'd greatly appreciate your time and help!

Answer 1

Target all LI items that contain UL's, find the number of LI's in those UL's, and multiply for width :

$('ul', 'li').css('min-width', function() {
    return ( $(this).find('li').length * 115 ) + 'px';
});