javascript - Jquery 计算下一个类，点击当前类后

Question

我想在点击每个 Click Me 后计算下一节课 .ChIdx。

例子:
如果点击 Click Me Num 2 结果是:2
如果点击 Click Me Num 3 结果是:1
如果点击 Click Me Num 1 结果是:3
如果点击 Click Me Num 4 结果是:0
等等……

怎么样，我该怎么办？

我试过下面的代码但没有用:

DEMO

$(document).on('click', '.NextCount', function (e) {
    e.preventDefault();
    var SizNext = $(this).closest('.ChIdx').next('.ChIdx').size();
    alert(SizNext)
})

.NextCount{
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ChIdx">
    <span class="NextCount">Click Me</span> // Num 1
</div>
<div class="ChIdx">
    <span class="NextCount">Click Me</span> // Num 2
</div>
<div class="ChIdx">
    <span class="NextCount">Click Me</span> // Num 3
</div>
<div class="ChIdx">
    <span class="NextCount">Click Me</span> // Num 4
</div>

Answer 1

代替 .next 使用 .nextAll

$(document).on('click', '.NextCount', function (e) {
    e.preventDefault();

    var SizNext = $(this).closest('.ChIdx').nextAll('.ChIdx').size();
    alert(SizNext)
})

Example

更新:

而不是 .size使用 .length，因为 .size 已弃用。谢谢 @A。 Wolff 的建议。