How to find if LI has children UL

Question

I have the following structure:

<ul>
    <li class="static">
        <ul class="static">
        </ul>
    </li>
    <li class="static"></li>
</ul>

As you can see the first LI element has UL inside it but the next one doesn't. Is there a way to find out through jquery if a certain LI has UL inside it or not? I want to do something like this:

if(li has children ul)
{
    do something
}

EDIT

I tried the following but it shows "YES" for all cases. Here's my code and HTML. In the HTML below, only "Link2" contains child UL and not Link1 and Link3. I just want to do some operation when a user clicks on some LI which contain child UL.

CODE

$('#DeltaPlaceHolderLeftNavBar div > div > ul > li > a').click(function()
{
   if($('li:has(> ul)'))
      alert("yes");
  else
     alert("no");
});

HTML

<div class="ms-core-navigation" id="DeltaPlaceHolderLeftNavBar">
 <div id="ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager">
  <div class=" noindex ms-core-listMenu-verticalBox" id="zz14_V4QuickLaunchMenu">
   <ul class="root ms-core-listMenu-root static" id="zz15_RootAspMenu">
    <li class="static">
     <a href="link1.php" tabindex="0" class="someclass1">
      <span class="someclass2">
       <span class="menu-item-text">Link1</span>
      </span>
     </a>
    </li>
    <li class="static">
     <a href="link2.aspx" tabindex="0" class="someclass3">
      <span class="someclass2">
       <span class="menu-item-text">Link2</span>
      </span>
     </a>
     <ul class="static">
      <li class="static">
       <a href="Link2A.php" tabindex="0" class="someclass1">
        <span class="someclass2">
         <span class="menu-item-text">Link2A</span>
        </span>
       </a>
      </li>
      <li class="static">
       <a href="Link2B.php" tabindex="0" class="someclass1">
        <span class="someclass2">
         <span class="menu-item-text">Link2B</span>
        </span>
       </a>
      </li>
     </ul>
    </li>
    <li class="static">
     <a href="Link3.php" tabindex="0" class="someclass1">
      <span class="someclass2">
       <span class="menu-item-text">Link3</span>
      </span>
     </a>
    </li>
   </ul>
  </div>
 </div>
</div>

Answer 1

In your specific code, it looks like you need to use this to refer to the element that was clicked on and then find the parent <li> from there so you are operating on only the <li> that had the click in it:

$('#DeltaPlaceHolderLeftNavBar div > div > ul > li > a').click(function() {
   if($(this).closest("li").children("ul").length) {
       // the clicked on <li> has a <ul> as a direct child
   }
});

---

In jQuery, you can use either .find("ul") or .children("ul") depending upon whether you're looking for only immediate descendants or any descendant.

For example, if you want to find out if a particular <li> tag that you already have a reference to has a <ul> as a direct child, then you can do this:

if ($(el).children("ul").length) {
    // el has a ul as an immediate descendant
}

Or, if the ul can be any descendant, then you can use this:

if ($(el).find("ul").length) {
    // el has a ul as a descendant at any level
}

---

If you want to just find all the <li> tags with <ul> below them, then you have these two options:

You can get a list of all <li> tags with a <ul> anywhere inside of it like this:

var tags = $("li").filter(function() {
    return $(this).find("ul").length !== 0;
});

If you only want immediate descendants, you can use this:

var tags = $("li").filter(function() {
    return $(this).children("ul").length !== 0;
});

---

You can then operate on those particular <li> tags by just calling a method on the jQuery object without using the if:

var tags = $("li > ul").addClass("hasSubMenu");