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

Question

JSFiddle

我无法弄清楚为什么，但如果在上面的小提琴中，如果你在输入中键入任何字符后跟向下键，则控制台会生成两个日志。第一个是值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到this，而不是li。所以过滤器不起作用。

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这很好用：

console.log($(this).next('.autocomplete').find('li').length);

您需要定位下一个.autocomplete并找到li。