javascript - 当 元素点击时如何获取 元素的索引？

Question

我有 3 个步骤的步骤形式。我想获得 <li> 的索引在stepinstallment什么时候<label>在里面选择检查:

1. 如果选择第一步，它会改变circle的背景颜色类。

2. 如果没有第一步选择了第二步和第三步，会显示错误信息。

我在 SO 上尝试了很多方法并自己编写，但它不起作用。

这是我的代码

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

以上JS代码总是返回0 .希望有人能帮我弄清楚这个案子。提前致谢。

Answer 1

尝试使用 .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>