Question

任何人都可以帮我解决这个问题：

我希望在keyup-event上的无序列表中嵌套下一个href触发点击事件，但我无法让它运行。

HTML看起来像这样：

<ul>
  <li><a href="#pagetop" id="active">Start</a></li>
  <li><a href="#section1">Topic 1</a></li>
  <li><a href="#section2">Topic 2</a></li>
  <li><a href="#section3">Topic 3</a></li>
</ul>

并且jQuery看起来像这样：

$(document).keyup(function (e) {
  if (e.keyCode == 40) { // down
    $('#active').next("li a").click();
  }
});

Answer 1

您正在尝试选择li元素的后续a#active兄弟元素。它没有li兄弟元素，但它的父元素是。

您需要选择父级，然后从那里选择同级li元素。

$(document).keyup(function(e) {
  if (e.keyCode === 40) { // down
    $('#active').parent().next().find('a').click();
  }
});

如果嵌套不同，您还可以使用.closest()方法：

$(document).keyup(function(e) {
  if (e.keyCode === 40) { // down
    $('#active').closest('li').next().find('a').click();
  }
});

您实际上可能必须访问第一个匹配的DOM元素才能触发click事件（since .click() is a native DOM element method），所以您也可以尝试：

$(document).keyup(function(e) {
  if (e.keyCode === 40) { // down
    $('#active').closest('li').next().find('a')[0].click();
  }
});

如何在ul中选择下一个匹配的子项并触发单击事件

1 个答案: