Adding a css class to all List elements if a class is inside with jQuery or JS

Question

I have a nested navigation where I want to put an arrow dynamically to the list elements that have and other nav inside the <li>. So I have to add a class dynamically to the <li> elements how has an specific class inside.

The idea is that this "navigation" could have as many levels as needed all of them with the arrow in the <li> if there is more inside.

Here is the basic code for my nav:

<ul class="nl-nav">
    <li>nothing</li>
    <li>
        <ul class="nl-nav">
            <li>nothing</li>
            <li>
                <ul class="nl-nav">
                    <li>nothing</li>    
                    <li>nothing</li>    
                </ul>
            </li>
            <li>nothing</li>
        </ul>
    </li>
</ul>

And this is how it should look after placing of the class:

<ul class="nl-nav">
    <li>nothing</li>
    <li class="arrow">
        <ul class="nl-nav">
            <li>nothing</li>
            <li class="arrow">
                <ul class="nl-nav">
                    <li>nothing</li>    
                    <li>nothing</li>    
                </ul>
            </li>
            <li>nothing</li>
        </ul>
    </li>
</ul>

Answer 1

Using jquery you can check whether the li has child (ul) or not, and then add the class.

$('li:has(> ul)').addClass('arrow');