var html = ""
// 添加 5 行
for(var r = 0r <5r++) {
html += "<tr>"
// 每行添加 3 个单元格
for(var c = 0c <3c++) {
html += "<td>r" + r + "c" + c + "</td>"
}
html += "</tr>"
}
$("#table").append(html)
}) <table border="1" id="table"></table>
//传入参数：需要遍历的对象，需要匹配的id，获取所有的父级节点的Id
function findIdList(data2, id, children = 'children', level = 0) {
var arrRes = []
let obj = {
id: 0,
[children]: data2
}
let rev = (data, id, level) => {
if (!data || !data[children] || !data[children].length) {
return
}
for (var i = 0 i < data[children].length i++) {
let item = data[children][i]
if (item.id == id) {
// 将匹配到的结果保存到数组
arrRes.unshift({ level, activeId: item.id })
// 递归它的父级
rev(obj, data.id, 0)
break
} else if (item[children] && item[children].length > 0) {
//如果有子集，则把子集作为参数重新执行本方法
rev(item, id, level + 1)
}
}
}
rev(obj, id, level)
return arrRes
}
let list = [
{id: 1, children: [
{id: 11, children: [{id: 12}]}
]},
{id: 2, children: [{id:21, children: [{id: 31}]}]}
]
let b = findIdList(list, 21)
console.log(b) // [ { level: 0, activeId: 2 }, { level: 1, activeId: 21 } ]
用 jQuery 的话，很简单:
$('ul li').click(function(e){
alert($(this).html())
})
自己实现就要麻烦一些:
function attachEvent(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt, fn, false)
}else if(obj.attachEvent){
obj.attachEvent('on'+evt, fn)
}
}
window.onload = function() {
var ul = document.getElementById('test')
var arr = ul.childNodes
alert(arr.length)
for(var i=0i<arr.lengthi++) {
if(arr[i].tagName != 'LI') continue
attachEvent(arr[i], 'click', function(e) {
var li = e.target || e.srcElement
alert(li.innerHTML)
})
}
}
为了方便，我给 ul 加了个 id：
<ul id="test"><li>sadada</li><li>sadada</li><li>sadada</li></ul>
补充
如果是obj.attachEvent("onclick",function(){arr[i]的一些操作})
这样写的话arr[i]不能传到function（）里 这里有什么好的解决方法么
这样可以解决，不过看起来不是很好。
arr[i].func = function(e) {
alert(this.innerHTML)
}
attachEvent(arr[i], 'click', arr[i].func)
补充二：
还是用以下 HTML 代码作测试
<ul id="test"><li>sadada</li><li>sadada</li><li>sadada</li></ul>
function attachEvent(obj, evt, fn){
obj._fn = obj._fn || {}
obj._fn[evt] = fn
if(obj.addEventListener){
obj.addEventListener(evt, obj._fn[evt], false)
}else if(obj.attachEvent){
obj.attachEvent('on'+evt, obj._fn[evt])
}
}
window.onload = function() {
var ul = document.getElementById('test')
var arr = ul.childNodes
for(var i=0i<arr.lengthi++) {
if(arr[i].tagName != 'LI') continue
attachEvent(arr[i], 'click', function(e) {
alert(this.innerHTML)
for(var j=0j<arr.lengthj++) {
arr[j].innerHTML = arr[j].innerHTML.replace(/#$/, '')
if(arr[j] != this) {
arr[j].innerHTML += '#'
}
}
})
}
}
可以实现你说的功能。
（点了某个节点，其他节点文字加个 '#'）
实际上你这个问题还是个选择器的问题，你可以看看 jQuery 的 siblings 这个函数，可以得到同层次的兄弟节点，很方便。
