Javascript 有没有一种方法可以使用子列表（没有jQuery）在无序列表上进行迭代？_Javascript_Html_Dom

Javascript 有没有一种方法可以使用子列表（没有jQuery）在无序列表上进行迭代？

javascript html dom

Javascript 有没有一种方法可以使用子列表（没有jQuery）在无序列表上进行迭代？,javascript,html,dom,Javascript,Html,Dom,我想突出显示无序列表“g1”中的每个列表项。该列表有几个子列表。我想按“向下箭头”和“向上箭头”突出显示下一项。我能够遍历外部列表，但是使用子列表，我的解决方案变得非常混乱。有没有比我使用纯JavaScript更好的方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Family Tree</title> </head&g

我想突出显示无序列表“g1”中的每个列表项。该列表有几个子列表。我想按“向下箭头”和“向上箭头”突出显示下一项。我能够遍历外部列表，但是使用子列表，我的解决方案变得非常混乱。有没有比我使用纯JavaScript更好的方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Family Tree</title>
</head>

<body id='main'>
    <nav>
        <h1 id=pos></h1>
    </nav>
    <ul id='g1' class="special">
        <ul id='generation2'>
            <li>John Williams</li>
            <li>Filippa Williams</li>
            <ul id='generation3'>
                <li>Juan James</li>
                <li>Catarina James</li>
                <li>Aoifa James</li>
            </ul>
            <li>Juan Williams</li>
        </ul>
        <li>Mark Williams</li>
        <li>Christina Johnson</li>
        <li>Christina Johnson</li>
        <li>Christina Johnson</li>
        <li>Juan Williams</li>
        <li>Juan Williams</li>
        <ul id='generation2'>
            <li>John Williams</li>
            <li>Filippa Williams</li>
        </ul>
    </ul>

</body>


</html>



document.onkeydown = function (e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            up()
            break;
        case 39:
            alert('right');
            break;
        case 40:
            down();
            break;
    }
};

var pos = -1;
var posSub = -1;
var posSubSub = 0;
var pointer;


function down() {
    var childrensChildren;
    var childrensGrandchildren;
    var gen1 = document.getElementById('g1');
    var gen1children = gen1.children;
    if (pos === -1) {
        gen1children[0].style.backgroundColor = 'yellow';
        pos++;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    if (pos == gen1children.length - 1) {
        gen1children[gen1children.length - 1].style.backgroundColor = 'white';
        gen1children[0].style.backgroundColor = 'yellow';
        pos = 0;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    if (gen1children[pos].firstElementChild) {
        var childrensChildren = gen1children[pos].children;
        if (childrensChildren.firstChild) {
            childrensGrandchildren = childrensChildren[posSub].children;
            childrensGrandchildren[posSubSub].style.backgroundColor = 'yellow';
            childrensGrandchildren[childrensGrandchildren.length - 1].style.backgroundColor = 'white';
            posSubSub++;
        } else {
            if (posSub === -1) {
                childrensChildren[0].style.backgroundColor = 'yellow';
                posSub++;
                return null;
            }
            if (posSub == childrensChildren.length - 1) {
                childrensChildren[childrensChildren.length - 1].style.backgroundColor = 'white';
                childrensChildren[0].style.backgroundColor = 'yellow';
                return null;
            } else {
                posSub += 1;
                childrensChildren[posSub - 1].style.backgroundColor = 'white';
                childrensChildren[posSub].style.backgroundColor = 'yellow';
                return null;
            }

        }
    }
    gen1children[pos].style.backgroundColor = 'white';
    gen1children[pos + 1].style.backgroundColor = 'yellow';
    pos += 1;
    document.getElementById('pos').innerHTML = pos;
    return null;
}

function up() {
    var gen1 = document.getElementById('g1');
    var gen1children = gen1.children;
    if (pos === -1) {
        gen1children[0].style.backgroundColor = 'yellow';
        pos++;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    if (pos == 0) {
        gen1children[gen1children.length - 1].style.backgroundColor = 'yellow';
        gen1children[0].style.backgroundColor = 'white';
        pos = gen1children.length - 1;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    gen1children[pos].style.backgroundColor = 'white';
    gen1children[pos - 1].style.backgroundColor = 'yellow';
    pos -= 1;
    document.getElementById('pos').innerHTML = pos;
    return null;
}


家谱


约翰·威廉姆斯
菲利帕·威廉姆斯

胡安·詹姆斯
卡塔丽娜·詹姆斯
阿伊法·詹姆斯

胡安·威廉姆斯

马克·威廉姆斯
克里斯蒂娜·约翰逊
克里斯蒂娜·约翰逊
克里斯蒂娜·约翰逊
胡安·威廉姆斯
胡安·威廉姆斯

约翰·威廉姆斯
菲利帕·威廉姆斯


document.onkeydown=函数（e）{
开关（如钥匙代码）{
案例37：
警惕（“左”）；
打破
案例38：
up（）
打破
案例39：
警惕（“右”）；
打破
案例40：
向下（）；
打破
}
};
var pos=-1；
var posSub=-1；
var-posSubSub=0；
var指针；
函数down（）{
var childrensChildren；
var childrensGrandchildren；
var gen1=document.getElementById（'g1'）；
var gen1children=gen1.children；
如果（位置==-1）{
gen1children[0]。style.backgroundColor='yellow'；
pos++；
document.getElementById（'pos'）。innerHTML=pos；
返回null；
}
if（pos==gen1children.length-1）{
gen1children[gen1children.length-1].style.backgroundColor='white'；
gen1children[0]。style.backgroundColor='yellow'；
pos=0；
document.getElementById（'pos'）。innerHTML=pos；
返回null；
}
if（gen1children[pos].firstElementChild）{
var childrensChildren=gen1children[pos]。children；
if（子女子女子女第一子女）{
childrensGrandchildren=childrensChildren[posSub]。children；
childrensGrandchildren[posSubSub].style.backgroundColor='yellow'；
childrensGrandchildren[childrensGrandchildren.length-1].style.backgroundColor='white'；
posSubSub++；
}否则{
如果（posSub===-1）{
childrensChildren[0]。style.backgroundColor='yellow'；
posSub++；
返回null；
}
if（posSub==childrensChildren.length-1）{
childrensChildren[children.length-1].style.backgroundColor='white'；
childrensChildren[0]。style.backgroundColor='yellow'；
返回null；
}否则{
posSub+=1；
childrensChildren[posSub-1].style.backgroundColor='white'；
childrensChildren[posSub].style.backgroundColor='yellow'；
返回null；
}
}
}
gen1children[pos].style.backgroundColor='white'；
gen1children[pos+1].style.backgroundColor='yellow'；
pos+=1；
document.getElementById（'pos'）。innerHTML=pos；
返回null；
}
函数up（）{
var gen1=document.getElementById（'g1'）；
var gen1children=gen1.children；
如果（位置==-1）{
gen1children[0]。style.backgroundColor='yellow'；
pos++；
document.getElementById（'pos'）。innerHTML=pos；
返回null；
}
如果（位置==0）{
gen1children[gen1children.length-1].style.backgroundColor='yellow'；
gen1children[0]。style.backgroundColor='white'；
pos=gen1children.length-1；
document.getElementById（'pos'）。innerHTML=pos；
返回null；
}
gen1children[pos].style.backgroundColor='white'；
gen1children[pos-1].style.backgroundColor='yellow'；
pos-=1；
document.getElementById（'pos'）。innerHTML=pos；
返回null；
}

您可以为所有菜单项创建一个类，然后在CSS中设置一个“select”属性

您可以快速创建一个包含所有

li

项的平面列表，并使用箭头键直观地遍历该列表：

//所有'li'元素的平面列表（按预期顺序）
让allLiElems=Array.from（document.getElementById（'g1'）.getElementsByTagName（'li'））；
设liInd=null；
让highlightAtInd=ind=>{
//从上一个节点删除高亮显示
if（liInd！==null）allLiElems[liInd].classList.remove（'highlight'）；
//将高亮显示应用于下一个节点
liInd=ind；
allLiElems[liInd].classList.add（'highlight'）；
};
window.addEventListener（'keydown'，evt=>{
如果（！[38,40]。包括（evt.keyCode））返回；
//获取新索引；确保它不会溢出/下溢
设newInd=liInd+（（evt.keyCode==38）？-1:+1）；
如果（newInd<0）newInd=allLiElems.length-1；
如果（newInd>=allLiElems.length）newInd=0；
highlightAtInd（newInd）；
evt.preventDefault（）；
});
//首先高亮显示第一个节点
highlightAtInd（0）
*{溢出：隐藏！重要；}
#g1{font size:11px；/*我想让它适合预览框*/}
.亮点{
背景色：rgba（255,0,0,0.3）；
}


约翰·威廉姆斯
菲利帕·威廉姆斯

胡安·詹姆斯
卡塔丽娜·詹姆斯
阿伊法·詹姆斯

胡安·威廉姆斯

马克·威廉姆斯
克里斯蒂娜·约翰逊
克里斯蒂娜·约翰逊
克里斯蒂娜·约翰逊
胡安·威廉姆斯
胡安·威廉姆斯

约翰·威廉姆斯
菲利帕·威廉姆斯