遍历 Jquery 自动完成列表中的第一个值

Question

我正在尝试使用 jQuery 遍历 div 以获取值来引用列表中的值。

我尝试了很多不同的方法，包括 .get()、.find() 和 .children()。

我正在使用 jQuery 自动完成插件，所以我无法在此处添加代码！但是我附上了截图。

注意：我认为我需要参考 ui-menu-item-wrapper 之类的 ui-menu-item-wrapper[0] 而不是 ui-id-2 或 tabindex。

如何获取列表中第一项的值？

编辑：了解如何复制代码！

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none; width: 746px; position: relative; top: -2465.55px; left: 261.858px;" xpath="1">
   <li class="ui-menu-item">
      <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">French</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-3" tabindex="-1" class="ui-menu-item-wrapper">Mayfair</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-4" tabindex="-1" class="ui-menu-item-wrapper">Fish in a Tie</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-5" tabindex="-1" class="ui-menu-item-wrapper">French Cuisine</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-6" tabindex="-1" class="ui-menu-item-wrapper">Fine Dining</div>
   </li>
</ul>

Answer 1

找到 class 为 .ui-menu-item-wrapper 的元素，该元素是 li 的 class 为 .ui-menu-item 的子元素。

$(li.ui-menu-item .ui-menu-item-wrapper')

Answer 2

html 中的 div 通常没有值，我假设您知道要搜索的文本 [或其中的一部分]。

我在下面的代码片段中提供了 3 个示例；

首先是通过ui-id
第二种是通过内容的子集获取菜单项。
始终获取 nth 菜单项 请注意，第一个索引是 1 而不是零

// if you know the ui-id number
var idNum = 6;
//console.log(`#ui-id-${idNum}`);
console.log($(`#ui-id-${idNum}`).text());
// if you know some of the content
var txt = "Fish";
//console.log(`div.ui-menu-item-wrapper:contains(${txt})`);
console.log($(`div.ui-menu-item-wrapper:contains(${txt})`).text());
//always get the nth menu-item
var index = 1;
console.log($(`.ui-menu-item:nth-child(${index}) > div.ui-menu-item-wrapper`).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: block; width: 746px; position: relative; top: -2465.55px; left: 261.858px;" xpath="1">
  <li class="ui-menu-item">
    <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">French</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-3" tabindex="-1" class="ui-menu-item-wrapper">Mayfair</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-4" tabindex="-1" class="ui-menu-item-wrapper">Fish in a Tie</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-5" tabindex="-1" class="ui-menu-item-wrapper">French Cuisine</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-6" tabindex="-1" class="ui-menu-item-wrapper">Fine Dining</div>
  </li>
</ul>

Answer 3

直接回答，菜单项经常创建和销毁，所以你必须在第一个有的时候得到。创建自动完成时会创建菜单项，但其中的项目会发生变化。

所以，鉴于此，我们可以在事件中找到它们，例如 "open" 事件，这样我们就可以 select 从中找到第一个。在这里，我在 console.log(di)

中显示菜单中第一项的文本

$(function() {
  var mythings = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
  var myA = $("#myautomagicautocomplete");
  myA.autocomplete({
    autoFocus: true,
    source: mythings
  });
  var w = myA.autocomplete("widget");
  myA.on("autocompleteopen", function(event, ui) {
      // var w = myA.autocomplete("widget");
      var fi = w.find('.ui-menu-item').first();
      var di = fi.find('.ui-menu-item-wrapper').text();
      console.dir(di);
    });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="myautomagicautocomplete" />

遍历 Jquery 自动完成列表中的第一个值

Traversing to the first value in a list in Jquery Autocomplete

javascript

jquery

jquery-ui

jquery-ui-autocomplete