<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 >#99998</a></li>
<li>#99999</li>
<li>#100000</li>
</ul>
為 <ul> 添加一個(gè)類 bar
刪除第 10 個(gè) <li>
在第 500 個(gè) <li>后面增加一個(gè)<li> , 其文字內(nèi)容為 <v2ex.com />
點(diǎn)擊任意 <li> 彈窗顯示其為當(dāng)前列表中的第幾項(xiàng)。
答案：
<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('是當(dāng)前第' + count + '項(xiàng)')
break
}
}
}, false)
</script>
</body>
