JS里有和var i=$('.list p').index($(this));一样效果的方法吗？

<div class="list">
        <p>Six60 - Special</p>
        <p>曲婉婷 - 没有什么不同</p>
        <p>水木年华 - 一生有你</p>
    </div>

var songArr = ["audio/Six60 - Special.mp3", 
"audio/曲婉婷 - 没有什么不同.mp3",
 "audio/水木年华 - 一生有你.mp3"];

 $('.list p').click(function() {
    var i = $('.list p').index($(this));
    music.src = songArr[i];
    music.play();
  })

效果是点哪个就播放哪个，但是如果不用jquery，用js有没有可以返回我点的是第几个P标签的方法，什么方法都可以。

---

换个思维

<div class="list">
        <p>Six60 - Special</p>
        <p>曲婉婷 - 没有什么不同</p>
        <p>水木年华 - 一生有你</p>
    </div>

var songArr = ["audio/Six60 - Special.mp3", 
"audio/曲婉婷 - 没有什么不同.mp3",
 "audio/水木年华 - 一生有你.mp3"];

 $('.list p').click(function() {
    var name = $(this).html();
    music.src = "audio/" + name + ".mp3"
    music.play();
  });

---

    // 使用jquery
    $('.list p').click(function(e) {
        e.stopPropagation();
        
        var i = $(e.target).index();
        
        music.src = songArr[i];
        music.play();
    });
    
    // 没主意题目LZ说不使用jquery, 使用原生js
    var list = document.getElementsByClassName('list')[0];
    var p = list.getElementsByTagName('p');
    for (var i = 0; i < p.length; i++) {
        p[i].index = i;
        p[i].onclick = function() {
            var j = this.index;
            alert(j);
        }
    }

---

js对于多个相同标签的事件定义都是要循环的，你可以在循环的时候顺便对每一个p增加一个key,这样每个标签就有自己的唯一序号了