How to get index of <li> element when element inside it clicked?

Question

I have step form with 3 steps. I want to get index of <li> in stepinstallment when <label> inside it selected to check:

1. If the first step is selected, it will change background color of circle class.

2. If the second and third step is selected without first step, it will display error message.

I've tried many ways on SO and write myself but it doesn't work.

This is my code

<ul class="clearfix">
    <li>
        <div class="step-one circle">
            <p>Step 1</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 2</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 3</p>
        </div>
    </li>
</ul>

<div class="stepinstallment">
    <ul>
        <li id="step-one" class="step">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-two" class="step">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-three" class="step">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>
    </ul>
</div>

JS

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);
    });

Above JS code always return 0 . Hope anyone can figure me out this case. Thanks in advance.

Answer 1

Try using .closest()

$(".stepinstallment label").on("click", function() {
    console.log($(this).closest("li").index())
});

  $('.stepinstallment label').on('click', function(){ console.log($(this).closest("li").index()) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="clearfix"> <li> <div class="step-one circle"> <p>Step 1</p> </div> </li> <li> <div class="step-two circle"> <p>Step 2</p> </div> </li> <li> <div class="step-two circle"> <p>Step 3</p> </div> </li> </ul> <div class="stepinstallment"> <ul> <li id="step-one"> <h2>Choose your document</h2> <div class="step-content"> <label> <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span> </label> </div> </li> <li id="step-two"> <h2>Choose your document</h2> <div class="step-content"> <label> <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span> </label> </div> </li> <li id="step-three"> <h2>Choose your document</h2> <div class="step-content"> <label> <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span> </label> </div> </li> </ul> </div> 

Answer 2

I hope this example will help you out !!!

 $("ul#wizard li").click(function () { var index = $("ul#wizard li").index(this); if(index!=0) alert("error ") else alert("index is: " + index) }); 

 <ul id="wizard"> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> <p>Some random tag</p> </ul> 

Answer 3

$('.step label')将不返回任何元素，因为没有与css选择器匹配的html

Answer 4

I can't see the .steps and .step class in your html.

with your html, I guess this code will work

$('.stepinstallment').on('click', 'label', function (e) {
    var $this = $(this);
    var li = $this.parents('li');
    console.log(li.index());
});

the steps of the code:

1. get the label element
2. get the li element contain the label
3. get the index

Answer 5

There is no click on label... it is empty. You can bind click on checkbox, the find the index of li and base on it color the same index of LI in your circle UL:

var sCircle = $('.steps ul li');

    $('input[type=radio]').on('click', function(){
       var liIndex=$(this).parents('li').index();
        if(liIndex>0){
            alert('error')
        }
        else{
            $('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
        }
    });

JSFIDDLE

Answer 6

 $(document).ready(function(){ var sCircle = $('.steps ul li'); $('.step label').on('click', function () { var currentLi = $(this).parents('li')[0]; currentLiIndex = -1; sCircle.each(function (index) { if (sCircle[index] == currentLi) { currentLiIndex = index; } }); console.log(currentLiIndex); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="clearfix"> <li> <div class="step-one circle"> <p>Step 1</p> </div> </li> <li> <div class="step-two circle"> <p>Step 2</p> </div> </li> <li> <div class="step-two circle"> <p>Step 3</p> </div> </li> </ul> <div class="stepinstallment steps"> <ul> <li id="step-one"> <h2>Choose your document</h2> <div class="step step-content"> <label> <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span> </label> </div> </li> <li id="step-two"> <h2>Choose your document</h2> <div class=" step step-content"> <label> <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span> </label> </div> </li> <li id="step-three"> <h2>Choose your document</h2> <div class="step step-content"> <label> <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span> </label> </div> </li> </ul> </div> 

Answer 7

This is what you need to do.

$('.step-content label').on('click', function(){
  var clickedId = $(this).parents('li').index();
  if(clickedId == 0) {
    $('.circle').css('background-color','yellow');
  } else {
    alert('error');
  }
});

Working example in jsfiddle https://jsfiddle.net/1uxus551/