我想知道李的身份

I want to find out id of ul li a

本文关键字：身份 想知道      更新时间：2023-09-26

我正在编写一个自动化脚本。我正在处理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并点击它吗？

您可以将相应的ID获取为：

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

这就是你可以比较的方式我假设你的类名对所有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");
      });
});

您需要使用事件委派，因为您说过，列表是通过ajax加载的。因此，为<ul>元素添加click listener，并只过滤链接<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

不确定您想要获得什么，但您可以使用：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中，您需要执行额外的代码，以便具有类似的功能，同时在可读性方面也是如此。使用ES6方法，如Array的find和String的includes，您可以编写以下内容：

// 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函数，只是因为如果您的环境还不支持ES6，您可以很容易地使用文档中提供的垫片，在文档中，除非您不使用transiler，否则您不能"垫片"语法（否则，您可以使用arrow的函数使contains更具可读性）。

相关文章：