遍历到Jquery Autocomplete中列表中的第一个值

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

只需直接回答，菜单项就会经常创建和销毁，因此，当第一个菜单项包含菜单项时，您必须先获得它。菜单项是在创建自动完成功能时创建的，但其中的项目有所变化。

因此，鉴于此，我们可以在一个事件（例如“ open”事件）中找到它们，然后从中选择第一个。在这里，我在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" />

Answer 2

使用类.ui-menu-item-wrapper查找元素，该元素是类li的{​​{1}}的子元素。

.ui-menu-item

Answer 3

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

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

1. 首先是通过ui-id来获取菜单项
2. 第二个是通过内容的子集获取菜单项。
3. 始终获得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>