//实现功能：点击哪个 <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.*

@xiatianup
开个培训班吧。。

【 在 Splunk (每天挖坟墓，不是你蹲就是我蹲) 的大作中提到: 】
: //实现功能：点击哪个 <li>就移动到第一个
: function setup() {
:     var lis = document.querySelectorAll('ul li');
: ...................
--
FROM 111.198.140.*

大侠，我把代码稍微改了一下，就实现了
但是同样的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.*

//本方案是错误的。请参加楼下的帖子


function setup() {
    var lis = document.querySelectorAll('ul li');
    var i=0;
    for (i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function(e) {
           var i0=i; //把下面的i换成 i0
            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]);//这样不可以！！
            }
        });
    }
}
【 在 Splunk (每天挖坟墓，不是你蹲就是我蹲) 的大作中提到: 】
: 大侠，我把代码稍微改了一下，就实现了
: 但是同样的var变量，为什么lis就可以 lis[i]不可以？
: 请看代码
: ...................
--
修改:a0123456789q FROM 183.95.135.*
FROM 183.95.135.*

我的实现有错？实现没用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.*