How do I make this jQuery not count sublists within a list?

Question

I would like to know how many "root" steps are in an HTML list. I am going to be iterating through the root steps but the sub-steps are to be completely ignored.

My jQuery always counts the root <li> steps as well as the child <li> steps, but all I want is the root.

Fiddle: https://jsfiddle.net/5x33omaw/1/

I want it to count only 3 steps instead of the 5 that it returns. How do I ignore the children?

HTML:

<ol id="sidebar-step-list" class="no-indent">
    <li>Step 1</li>
    <li>Step 2
        <ul>
            <li>Substep 1</li>
            <li>Substep 2</li>
        </ul>
    </li>
    <li>Step 3</li>
</ol>
<hr/>
<div id="dog"></div>

JavaScript/jQuery

var stepList = $("#sidebar-step-list li");
var length = stepList.length;

$("#dog").text("Number of steps: " + length);

Answer 1

just add > sign

var stepList = $("#sidebar-step-list > li");

by adding > will give you the direct li of #sidebar-step-list

DEMO