javascript - JQuery 无法访问下一个目标元素

Question

JSFiddle

我不明白为什么，但是如果在上面的 fiddle 中，如果您在输入中键入任何字符，然后按向下键，控制台会生成两个日志。第一个是 3 的值(正确)，第二个是 0 的值(不正确)。

我正在尝试针对特定输入后的元素:

// this works...
console.log($('.autocomplete li').length);
// this does not work
console.log($(this).next('.autocomplete li').length);

如果我只记录 $(this)，它会按预期返回 input。我还尝试了 .nextAll、.find 和各种组合。

为什么找不到目标的 .next 元素？

Answer 1

它是 .autocomplete next to this，而不是 li。所以过滤器将不起作用。

相反，您需要使用 $(this).next('.autocomplete').find('li')

但是，您是否考虑过无 JS 的解决方案？

<input type="text" list="options" />
<datalist id="options"> <!-- ^-- Same identifier -->
  <option>America</option>
  <option>Europe</option>
  <option>Japan</option>
</datalist>