How to get index of
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:

If the first step is selected, it will change background color of circle class.
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.

Possible duplicate of [Get index of clicked element in collection with jQuery](http://stackoverflow.com/questions/5545283/get-index-of-clicked-element-in-collection-with-jquery) — Itay, Oct 22 '15 at 05:53

score 2 · Accepted Answer · answered Oct 22 '15 at 06:00

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>

Thank you. This code works for me. I want to check if index >= 1, it will check prev step circle, if it doesn't have class active. It will display error message. Could you help me please? — The Hung, Oct 22 '15 at 06:20
@TheHung `if ($(this).closest("li").index() >= 1) {//do stuff}` — guest271314, Oct 22 '15 at 06:23
Yes, thank you. I know this stuff. I mean is if `index` >= 1, I want to get list `
@TheHung Try `if ($(this).closest("li").index() >= 1) {if ($(this).closest("li").prev(".step").is(".active")) {$(this).closest("li").addClass("active")}}` — guest271314, Oct 22 '15 at 06:34

score 1 · Answer 2 · answered Oct 22 '15 at 06:09

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>

score 0 · Answer 3 · answered Oct 22 '15 at 05:53

0

$('.step label') will not return any elements, since there is no html matching the css selector

answered Oct 22 '15 at 05:53

Saransh Kataria

1,447
12
19

score 0 · Answer 4 · answered Oct 22 '15 at 06:00

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:

get the label element
get the li element contain the label
get the index

score 0 · Answer 5 · answered Oct 22 '15 at 06:04

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

score 0 · Answer 6 · answered Oct 22 '15 at 06:06

$(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>

score 0 · Answer 7 · answered Oct 22 '15 at 06:22

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/

How to get index of element when element inside it clicked?

7 Answers7

How to get index of
element when element inside it clicked?