//实现功能：点击哪个 <li>就移动到第一个
function setup() {
    var lis = document.querySelectorAll('ul li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function(e) {
            //下面两句有错， 该怎么写？
            parent = lis[i].parentNode;
            parent.insertBefore(lis[i], lis[0])
        });
    }
}


// Example case.
document.body.innerHTML = `
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>`;

setup();

document.getElementsByTagName("li")[1].click();
console.log(document.body.innerHTML);
--
FROM 61.171.205.*

大侠，我把代码稍微改了一下，就实现了
但是同样的var变量，为什么lis就可以 lis[i]不可以？

请看代码

function setup() {
    var lis = document.querySelectorAll('ul li');
    var i=0;
    for (i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function(e) {
            if (e.target.nodeName === 'LI') {
                parent = e.target.parentNode;
                parent.insertBefore(e.target,parent.firstChild);
                console.log(this); //这里的this就是lis[i]
                console.log(lis); //这里成功打印 lis ， lis和i都是function外面的变量，为什么这样可以啊
                //console.log(lis[i]);//这样不可以！！
            }
        });
    }
}


【 在 a9udn9u (******) 的大作中提到: 】
: 用var定义的变量是函数范围内有效的，你的事件处理函数被执行时，闭包内的变量i等于lis.length，lis[i]等于undefined。
: 在for循环外把ul赋给一个变量，在事件处理函数里直接ul.insertBefore(e.target, ul.firstChild)，应该就可以了。
: 或者更简单一点，把事件处理函数加在ul上。
: ...................
--
修改:Splunk FROM 61.171.205.*
FROM 61.171.205.*

我的实现有错？实现没用i了，错在哪里？

你的意思是注释里面想用 lis[i]是错误的吧？

但还有个疑问，就是为什么lis可以用呢？
console.log(lis)就没错！


【 在 a0123456789q (a0123456789q) 的大作中提到: 】
: //本方案是错误的。请参加楼下的帖子
: function setup() {
:     var lis = document.querySelectorAll('ul li');
: ...................
--
修改:Splunk FROM 61.171.205.*
FROM 61.171.205.*

大牛！
我彻底明白了

【 在 a9udn9u (******) 的大作中提到: 】
: 你的第二个实现功能上是可以的，只是有几个小问题。比如if (e.target.nodeName === 'LI')这个判断不需要了因为你的selector选出的就是<li>节点。还有你可以考虑一下event delegation，把事件处理函数放在<ul>上，而不是每个<li>上，这样只需要一个事件处理函数，加减列
--
修改:Splunk FROM 61.171.205.*
FROM 61.171.205.*

var改成let，这个i变量就可以在function(e)内部直接用了吗？

【 在 luoyuecheng (luoyuecheng) 的大作中提到: 】
: function setup() {
:     const ul = document.querySelector('ul');
:     ul.removeEventListener('click', ulClick)
: ...................
--
修改:Splunk FROM 61.171.205.*
FROM 61.171.205.*