使用 javascript 或 jquery 中的箭头键选择 li 元素的问题

Question

我现在一直在尝试这样做，但我不知道该怎么做。基本上我在下面有这个代码，它生成 li 元素并将它们附加到已经存在的 ul 中。

$(document.body).on("keyup", "", ".menuSearch", function (e) {
    if (e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40) {
        $(".searchResults").html("");
        var searchField = $(".menuSearch").val();
        var expression = new RegExp(searchField, "i");
        HidingShowingUlForSearch();
        $.each(finalJsonForMenu, function (key, value) {
            if (value.title.search(expression) != -1 || value.description.search(expression) != -1) {
                $("#searchResults").append(
                    '<li class="list-group-item mickyMouseResultLi" style=" border:none; min-width: 95%;">' +
                    '<a target="_blank" href="' + value.url + '"</a>' +
                    '<p>' +
                    value.title + '</p>' + '</li>');

                //+'<p style="color: #757373">' + value.description + '</p>' 
            }
        });
    }
});

这是这段代码生成的 HTML：

<ul class="list-group searchResults pre-scrollable mickyMouseUl" style="position: absolute; z-index: 13; border: 1px solid rgb(206, 206, 206); display: block;" id="searchResults">
  <li class="list-group-item mickyMouseResultLi" tabindex="1" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" <="" a="">
      <p>APU/APIIT PAGOL</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="2" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" <="" a="">
      <p>APU B.Sc. Presentations</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="3" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" <="" a="">
      <p>APU Parking Guideline</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="4" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" <="" a="">
      <p>APU Documents</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="5" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" <="" a="">
      <p>APU Student Handbook</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="6" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" <="" a="">
      <p>APU B.Sc Presentations &amp; EOS Interview/LCM Schedules - Management Console</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="7" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" <="" a="">
      <p>APU B.Sc Presentations &amp; EOS Interview/LCM Schedules</p>
    </a>
  </li>
</ul>

现在它的工作方式也很好，但是在 li 生成之后，我必须使用 courser 指向并单击它们，而我需要一种方法，我可以使用箭头键和 enter 按钮访问新生成的 li。有什么建议？

Answer 1

首先生成的链接是错误的<a target="_blank" href="testlink" <="" a="">。此<="" 不能是有效属性。

第二点：我不知道您的代码如何通过li/a，但我试图从您的信息开始制定一个完整的工作解决方案。

我从这个答案中实现了一些代码：https://stackoverflow.com/a/8902976/4031083。显然是针对上下文进行编辑的。

添加的新代码是这样的：

var liSelected;
$(window).keydown(function(e) {
        var li = $('li');
    if(e.keyCode === 40) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else {
            liSelected = li.eq(0).addClass('selected');
        }
    } else if(e.keyCode === 38) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.last().addClass('selected');
            }
        } else {
            liSelected = li.last().addClass('selected');
        }
    }
        liSelected.find('a').focus();
});

Here the complete JSFiddle.

希望对你有所帮助。

Answer 2

所以我用javascript想通了，步骤如下：

1- 你必须获得 ul 并获得它的第一个孩子并为其添加一个 id：

var list = document.getElementById('searchResults'); // targets the<ul>
var first = list.firstChild; // targets the first <li>
first.setAttribute('id', 'selected');

2- 然后你可以使用Document.boy on key up 并实现下面的switch case：

 switch (e.keyCode) {
            case 38: // if the UP key is pressed
                var ulSelected = document.getElementById('searchResults');

                var selected = document.getElementById('selected');
                if (selected.previousSibling == null) {
                    break;
                }
                var newSelected = selected.previousSibling;
                selected.removeAttribute('id');
                newSelected.setAttribute('id', 'selected');
                var searchBar = document.getElementById('menuSearch');
                searchBar.value = selected.firstChild.innerText;
                MickyAutoScroll(selected, ulSelected)
                break;
            case 40: // if the DOWN key is pressed
                var ulSelected = document.getElementById('searchResults');
                var selected = document.getElementById('selected');
                if (selected.nextSibling == null) {
                    break;
                }
                var newSelected = selected.nextSibling;
                selected.removeAttribute('id');
                newSelected.setAttribute('id', 'selected');
                var searchBar = document.getElementById('menuSearch');
                searchBar.value = selected.firstChild.innerText;
                MickyAutoScroll(selected, ulSelected)
                break;
            case 13:
                var link = document.getElementById("selected");
                link.firstChild.click();
                break;
            case 27:
                var searchBar = document.getElementById("menuSearch");
                searchBar.value = null;
                break;
        }

这基本上会向上、向下移动并使用输入按钮访问 li 中的链接