单击当前类后，Jquery计算下一个类

Question

我希望点击下一个Click Me的每个.ChIdx点数。

EX：
如果点击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 提供此建议。

Answer 2

只需使用索引，在回调中传递，只需将处理程序附加到ChIdx

即可

$('.ChIdx').click(function(e){
    alert("Num" + ($(this).index() + 1));
});