How check in javascript that a li element has inner ul?

Question

Good day.

HTML:

<ul>
    <li class="sub"><a href="/katalog1/">catalog</a>
        <ul>
            <li class="dir"><a href="">subcatalog</a>               
                <ul>
                    <li><a href="">sublink</a></li>
                    <li><a href="">sublink</a></li>
                    <li><a href="">sublink</a></li>
                </ul>               
            </li>
            <li class="dir"><a href="">subcatalog</a></li>
            <li class="dir"><a href="">subcatalog</a></li>
        </ul>
    </li> 
    <li class="sub"><a href="">catalog</a></li>
    <li class="sub"><a href="">catalog</a></li>
    <li class="sub"><a href="">catalog</a></li>
    <li class="sub"><a href="">catalog</a></li>
</ul>

<style>

ul > li.sub:hover > ul{display:block;}
ul > li.sub:hover{
background: #fff url(../../images/arrow1.png) no-repeat 91% center;
border-bottom: 2px solid #e30613;
padding-right: 25px;
}
</style>

I use script:

$('li.main_menu_top_li').has('ul').addClass('sub');

Tell me please how make it on javascript (only javascript)?

Answer 1

One of two ways.

first get the element:

var d = document.getElementByClassName("li.main_menu_top_li");

Then:

if (d.firstChild) {
    // It has at least one
    d.className = d.className + " sub";
}

or the hasChildNodes() function:

if (element.hasChildNodes()) {
    // It has at least one
    d.className = d.className + " sub";
}

Answer 2

Assuming you want to add the sub class to the LI that has nested ULs under it:

Plain JS

var li = document.querySelector('li.main_menu_top_li');
if (li.getElementsByTagName("ul").length>0) li.className+="sub"; 
 // or get the addClass/hasClass from http://snipplr.com/view/3561/

jQuery:

var li = $('li.main_menu_top_li');
if (li.children('ul').length) li.addClass('sub');

If you want to add the class to any UL that is inside an LI then

var li = $('li.main_menu_top_li');
li.children('ul').each(function() {
  $(this).addClass('sub');
});

Answer 3

The following code looks at all LI elements and checks if they have a UL element. If so, that UL element gets the class 'sub'. If you want instead for that LI to have the class 'sub', un-comment the commented portions of code and then remove the line underneath each commented line.

Here's the first jsfiddle :

//IE 10+ and all other major browsers
var el = document.getElementsByTagName('li');

var listItems = Array.prototype.slice.call(el);

listItems.forEach(function(el) {
    var childrenList = Array.prototype.slice.call(el.children);  

    childrenList.forEach(function(el) {
        if(el.tagName === 'UL') {
            //if(!el.parentNode.classList.contains('sub') {
            if(!el.classList.contains('sub')) {
                //el.parentNode.classList.add('sub')
                el.classList.add('sub');
            }
        }
    });
});

Here's the second jsfiddle :

//IE8+ and all other major browsers, I think
var el = document.getElementsByTagName('li');

var listItems = Array.prototype.slice.call(el);

listItems.forEach(function(el) {
    var childrenList = Array.prototype.slice.call(el.children);  

    childrenList.forEach(function(el) {
        if(el.tagName === 'UL') {
            //if(el.parentNode.className === '') {
            if(el.className === '') {
                //el.parentNode.className = 'sub'
                el.className = 'sub';
            } else {
                //el.parentNode.className += 'sub'
                el.className += ' sub';   
            }
        }
    });
});