li 的 jQuery 选择器，其第一个孩子是跨度

Question

这是我无法更改的 HTML 结构：

我成功地为li 附加了一个点击事件处理程序，如下所示：

$(document).on("click", "#menu li.top-level", function (e) { 

     // whatever code

});

但是，我不希望处理程序捕获对具有z-index: auto 的li 的点击。我试过这个：

$(document).on("click", "#menu li.top-level[style='z-index: auto;']", function (e) {

和

$(document).on("click", "#menu li[style='z-index: auto;'].top-level", function (e) {

但没有运气。

另外，我想在处理程序中捕获的li 有一个<a> 作为第一个孩子，而其他人有一个<span>。也许这可以用来提供帮助？

编辑

这是 HTML 结构：我要捕捉上面的li，而不是另一个

Answer 1

由于您不想选择具有style='z-index: auto;' 的元素，因此请使用:not() 选择器和:has() 来定位具有锚作为第一个子元素的元素

$(document).on("click", "#menu li.top-level:not([style='z-index: auto;']):has(> a:first-child)", handler);

$(document).on("click", "#menu li.top-level:not([style='z-index: auto;']):has(> a:first-child)", function() {
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li class="top-level"><a href="#">1</a></li>
  <li class="top-level"><span>2</span></li>
  <li class="top-level" style='z-index: auto;'><a href="#">3</a></li>
</ul>

Answer 2

如果您想要的li 元素的第一个子元素保证为a，而您不想要的元素的第一个子元素始终为span，则最好根据该条件进行选择因为按样式匹配元素通常很脆弱：

$(document).on("click", "#menu li.top-level:has(> a:first-child)", function (e) {