CODEWITHSUNDEEP
javascriptjqueryhtmlcss
The Hung
The Hung

Reputation: 309

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

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.

Upvotes: 1

Views: 3431

Answers (7)

Shuvro
Shuvro

Reputation: 1499

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/

Upvotes: 0

tabassum
tabassum

Reputation: 1110

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>

Upvotes: 1

Mitul
Mitul

Reputation: 3427

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

Upvotes: 0

AlexBerd
AlexBerd

Reputation: 1504

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

Upvotes: 0

jokcylou
jokcylou

Reputation: 113

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

Upvotes: 0

guest271314
guest271314

Reputation: 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>

Upvotes: 2

Saransh Kataria
Saransh Kataria

Reputation: 1497

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

Upvotes: 0

Related Questions