javascript - 机顶盒页面光标移动，怎么获取下一个焦点元素？

Question

焦点定位。
这个页面是读取XML生成的，全部是p布局。
初始化后能得到的数据有一个包括页面所有焦点元素、元素的left、top、width、height的无序数组。
需求：按遥控器上下左右的时候，光标能正确的定位。
比如：现在光标在 看大片 按又跳到 热剧、按左跳到左侧 推荐、按下跳到 澳门风雨 三角图标。

现在的思路是先获取当前光标所在元素的 left、top。
然后再循环整个数组，如果向右 则获取所有 left值大于 当前焦点元素的left值的元素。再获取top最接近当前焦点元素top的元素。代码如下：

var right=function(){
    //1、当向右时，获取所有left大于触发焦点的元素left的元素
    //2、在获取到的元素集合中取top值最接近触发焦点元素top的元素
    //3、设置得到元素的焦点
    var buts = [];
    var top = Number(selectBut.buttonData.top); //获取当前元素的top
    var left = Number(selectBut.buttonData.left); //获取当前元素的left
    for(var i = 0; i < _Btns.length;i++){
        var but1 = _Btns[i];
        if(selectBut.buttonData.id != but1.buttonData.id){
            var _left = Number(but1.buttonData.left);
          //  var _top = Number(but1.buttonData.top);
            if(_left > left){
                buts.push(but1);
            }
        }
    }
    if(buts && buts.length > 0) {
        selectBut = buts.sort(function (a, b) { //获取top最接近触发事件元素的元素
            return Math.abs(a.buttonData.top - top) - Math.abs(b.buttonData.top - top);
        })[0];
        selectBut.focus();
    }
};

但是向左的时候，top最接近的有3个，由于排序问题，或跳过中间两个，光标跑到最前面去了。
比如，初始光标在 资费说明 这个时候向左，光标直接跑到 热剧
向右也是同样的问题，如果光标在 热剧 ，向右会直接跑到 资费说明

向左代码如下：

var left=function(){
    //1、当向左时，获取所有left小于触发焦点的元素left的元素
    //2、在获取到的元素集合中取top值最接近触发焦点元素top的元素
    //3、设置得到元素的焦点
    var buts = [];
    var top = Number(selectBut.buttonData.top); //获取当前元素的top
    var left = Number(selectBut.buttonData.left); //获取当前元素的left
    for(var i = 0; i < _Btns.length;i++){
        var but1 = _Btns[i];
        if(selectBut.buttonData.id != but1.buttonData.id){
            var _left = Number(but1.buttonData.left);
            if(_left < left){
                buts.push(but1);
            }
        }
    }
    if(buts && buts.length > 0){
        selectBut = buts.sort(function(a, b) { //获取top最接近触发事件元素的元素
            return Math.abs(a.buttonData.top - top) - Math.abs(b.buttonData.top - top);
        })[0];
        selectBut.focus();
    }
};

 向下代码如下：
     var down=function(){
    //1、当向下时，获取所有top大于触发焦点的元素top的元素
    //2、在获取到的元素集合中取left值最接近触发焦点元素left的元素
    //3、设置得到元素的焦点
    var buts = [];
    var top = Number(selectBut.buttonData.top); //获取当前元素的top
    var left = Number(selectBut.buttonData.left); //获取当前元素的left
    for(var i = 0; i < _Btns.length;i++){
        var but1 = _Btns[i];
        if(selectBut.buttonData.id != but1.buttonData.id){
            var _top = Number(but1.buttonData.top);
            if(_top > top){
                buts.push(but1);
            }
        }
    }
    if(buts && buts.length > 0) {
        selectBut = buts.sort(function (a, b) { //获取top最接近触发事件元素的元素
            return Math.abs(a.buttonData.left - left) - Math.abs(b.buttonData.left - left);
        })[0];
        selectBut.focus();
    }
};

向上代码如下：
    var up=function(){
    //1、当向上时，获取所有top小于触发焦点的元素top的元素
    //2、在获取到的元素集合中取left值最接近触发焦点元素left的元素
    //3、设置得到元素的焦点
    var buts = [];
    var top = Number(selectBut.buttonData.top); //获取当前元素的top
    var left = Number(selectBut.buttonData.left); //获取当前元素的left
    for(var i = 0; i < _Btns.length;i++){
        var but1 = _Btns[i];
        if(selectBut.buttonData.id != but1.buttonData.id){
            var _top = Number(but1.buttonData.top);
            if(_top < top){
                buts.push(but1);
            }
        }
    }
    if(buts && buts.length > 0) {
        selectBut = buts.sort(function (a, b) { //获取top最接近触发事件元素的元素
            return Math.abs(a.buttonData.left - left) - Math.abs(b.buttonData.left - left);
        })[0];
        selectBut.focus();
    }
};

Answer 1

正在做这个，但是本人才刚学不久，基本就先掌握了页面UI布局这一块，JS刚开始学，焦点数组怎么存呢！页面所有p的焦点具体怎么存呢？ 求指教

Answer 2

这样做你会很累，建议使用A标签