title: How to get index of <li> element when element inside it clicked?
body: <p>I have step form with 3 steps. I want to get index of <code>&lt;li&gt;</code> in <code>stepinstallment</code> when <code>&lt;label&gt;</code> inside it selected to check:</p>
  
  <ol>
  <li><p>If the first step is selected, it will change background color of <code>circle</code> class.</p></li>
  <li><p>If the second and third step is selected without first step, it will display error message.</p></li>
  </ol>
  
  <p>I've tried many ways on SO and write myself but it doesn't work.</p>
  
  <p>This is my code</p>
  
  <pre><code>&lt;ul class="clearfix"&gt;
      &lt;li&gt;
          &lt;div class="step-one circle"&gt;
              &lt;p&gt;Step 1&lt;/p&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="step-two circle"&gt;
              &lt;p&gt;Step 2&lt;/p&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="step-two circle"&gt;
              &lt;p&gt;Step 3&lt;/p&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="stepinstallment"&gt;
      &lt;ul&gt;
          &lt;li id="step-one" class="step"&gt;
              &lt;h2&gt;Choose your document&lt;/h2&gt;
              &lt;div class="step-content"&gt;
                  &lt;label&gt;
                      &lt;input type="radio" id="option-1" name="options" value="1" /&gt;
                      &lt;span&gt;ID card and household registration&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li id="step-two" class="step"&gt;
              &lt;h2&gt;Choose your document&lt;/h2&gt;
              &lt;div class="step-content"&gt;
                  &lt;label&gt;
                      &lt;input type="radio" id="option-1" name="options" value="1" /&gt;
                      &lt;span&gt;ID card and household registration&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li id="step-three" class="step"&gt;
              &lt;h2&gt;Choose your document&lt;/h2&gt;
              &lt;div class="step-content"&gt;
                  &lt;label&gt;
                      &lt;input type="radio" id="option-1" name="options" value="1" /&gt;
                      &lt;span&gt;ID card and household registration&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var sCircle = $('.steps ul li');
  
      $('.step label').on('click', function(){
          var $this = $(this),
              sCircleIndex = parseInt(sCircle.index()),
              sCircleChild = sCircle.children('div'),
              currParent = $this.parents('ul').index();
  
          console.log(currParent);
      });
  </code></pre>
  
  <p>Above JS code always return <code>0</code>. Hope anyone can figure me out this case. Thanks in advance.</p>