<ul id="list" class="foo">
<li>#0</li>
<li><span>#1</span></li>
<li>#2</li>
<li>#3</li>
<li><ul><li>#4</li></ul></li>
...
<li><a href="//v2ex.com">#99998</a></li>
<li>#99999</li>
<li>#100000</li>
</ul>
为 <ul> 添加一个类 bar
删除第 10 个 <li>
在第 500 个 <li>后面增加一个<li> , 其文字内容为 <v2ex.com />
点击任意 <li> 弹窗显示其为当前列表中的第几项。
答案：
<body>
<ul id="list" class="foo">
</ul>
<script>
var list = document.getElementById('list')
void function () {
var html = ''
for (var i = 0; i <= 550; i++) {
if (i === 1) {
html += '<li><span>#1</span></li>'
} else if (i === 4) {
html += '<li><ul><li>#4</li></ul></li>'
} else {
html += '<li>#' + i + '</li>'
}
}
list.innerHTML = html
}()
list.className += ' bar'
var li10 = document.querySelector('#list > li:nth-of-type(10)')
li10.parentNode.removeChild(li10)
li10.remove()
var li = document.createElement('LI')
var textNode = document.createTextNode('<v2ex.com />')
li.appendChild(textNode)
var li501 = document.querySelector('#list > li:nth-of-type(501)')
list.insertBefore(li, li501)
list.addEventListener('click', function (e) {
var target = e.target || e.srcElement
while (target.nodeName !== 'LI') {
target = target.parentNode
}
var children = target.parentNode.childNodes
var count = 0
for (var i = 0, len = children.length; i < len; i++) {
var node = children[i]
if (node.nodeName === 'LI') {
count++
}
if (node === target) {
alert('是当前第' + count + '项')
break
}
}
}, false)
</script>
</body>
网友评论