点击一个元素获取所在集合中的次序

Question

<div>
    <p class="special"></p>
    <p class="special"></p>
</div>
<div>
    <div>
        <p class="special"></p>
    </div>
    <div>
        <p class="special"></p>
    </div>
</div>
<div>
    <p class="special"></p>
</div>

如上面所示：$(".special").length=5, 我想做的是点击某一个p标签获取 此p标签在 $(".special")中的次序。 点击第七行的p标签，得到它的次序为3，点击第二行的p标签，得到它的次序为1。
求解答~

Answer 1

$('.special').click(function(){
  alert($(this).index() + 1);
})

直截了断，干脆利落

Answer 2

这里给你演示了两种方法 https://jsfiddle.net/qh2dtub4/

代码：

$(".special").each((i ,p) => {
    $(p).attr("data-index", i + 1).on("click", e => {
        console.log($(e.target).data("index"), i + 1);
    });
});

Answer 3

用$(this)试试