遍历 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

直接回答，菜单项经常被创建和销毁，所以当它有一些时你必须得到第一个。菜单项是在创建自动完成时创建的，但里面的项是变化的。

所以，鉴于此，我们可以在一个事件中找到它们，例如“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 的元素，该元素是类为.ui-menu-item 的li 的子元素。

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

Answer 3

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

我在下面的sn-p中提供了3个例子；

1. 首先是通过ui-id获取菜单项
2. 第二个是通过内容的子集获取菜单项。
3. 总是得到nth 菜单项注意第一个索引是1而不是0

// 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>