How to apply class as per the Count of the li tag?

Question

Here is the structure of the HTML

<div class="submenu">
<ul>
<li></li>
<li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    </ul>
<ul>
    <li></li>
    <li></li>
    </ul>
</div>

If there are three UL the the I want to add three-col class. two UL then two-col

Answer 1

Using Jquery, $(".submenu > ul").size() gives you the count.

This will set the class on the div with class submenu:

var count = $(".submenu > ul").size();
if(count == 3)
{
  $(".submenu").addClass("three-col");
}
else if(count == 2)
{
  $(".submenu").addClass("two-col");
}

Answer 2

$(function(){
  $(".submenu").addClass(
    ($(".submenu ul").size() == 2) ? "two-col" : "three-col"
  );
});