Question

我正在研究自动化脚本。我正在处理ajax下拉。点击文本框[input type=text ]，它会生成一个ul列表。像这样：

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-121" tabindex="0" style="z-index: 100002; display: block; top: 26px; left: 0px; width: 392px;">
<li class="ui-menu-item" role="presentation"><a id="ui-id-327" class="ui-corner-all" tabindex="-1"><span style="display:inline-block;">Select Org Unit</span></a></li>
<li class="ui-menu-item" role="presentation"><a id="ui-id-328" class="ui-corner-all" tabindex="-1"><span style="display:inline-block;">10</span></a></li><li class="ui-menu-item" role="presentation"><a id="ui-id-329" class="ui-corner-all" tabindex="-1"><span style="display:inline-block;">1A</span></a></li>
</ul>

它始终会生成唯一ID，因此我无法使用ID进行点击。有没有什么方法可以通过text / val找到并获得id并点击它？

Answer 1

您可以将相应的ID视为：

$("ul li a").on('click', function(){
      var myID = $(this).attr('id');
});

Answer 2

这是你可以比较的方法我假设你的班级名称对于所有li标签是相同的：

$("li.ui-menu-item").each(function(){
   if($(this).children().children().text()==10)
      var id=$(this).children().attr("id");
      $("#"+id).on("click", function () {
          alert("clicked");
      });
});

Answer 3

不确定要获取的内容，但您可以使用:contains根据文本内容选择您要查找的节点。例如：

$("ul > li.ui-menu-item > a:contains('1A')").click();

这将在第二个菜单项的元素上发出click事件;假设文本内容是唯一的。

您还可以使用

来检索id

var id = $("ul > li.ui-menu-item > a:contains('1A')").attr('id');

当然还要添加click个侦听器等等。一旦你有了正确的选择器来处理元素，你就可以做你需要的一切。

<强>更新

不幸的是，常规DOM API中的:contains与querySelector / querySelectorAll无关。在JavaScript中，您需要执行额外的代码，以便在可读性方面具有类似的功能。使用像Array's find和String's includes这样的ES6方法，您可以编写如下内容：

// Array's method cannot be used directly on value from `querySelectorAll`;
// because such method returns a NodeList; so we need a
// generic to use on Array-like object

var find = Function.call.bind(Array.prototype.find);

// this function creates a function to use as predicate
// in `find` using the text given

var contains = function(text) {
  return function (element) { return element.textContent.includes(text) }
}

// once you have such functions, you can write:

var a = document.querySelectorAll("ul > li.ui-menu-item > a");

find(a, contains("1A")).click();

我之前没有使用arrow functions，因为如果你的环境还不支持ES6，你可以轻松使用文档中提供的填充程序，在那里你可以＆＃39;＃34 ;垫片＆＃34;语法，除非你不使用转换器（否则你可以用箭头函数使contains更具可读性）。

Answer 4

你需要使用事件委托，因为你说，列表是通过ajax加载的。因此，为<ul>元素添加点击监听器，并仅过滤<a>的子<li>这样的链接：

<强> HTML

<ul>
</ul>

<强>的JavaScript

$("ul").on('click', 'li a', function(){
    console.log('ID:', $(this).attr('id'));
});

// Just a simulation for dynamically loaded elements/links
setTimeout(function() {
    var list = [];

    for(var i = 0 ; i < 10 ; ++i) {
       list.push('<li><a href="#" id="ID-' + i + '">Link-' + i + '</a></li>');
    }

    $('ul').html(list.join(''));
}, 2000);

请参阅jsbin

我想找出ul li的id

4 个答案: