用于li的jQuery选择器，其第一个子节点是span

Question

这是一个我无法改变的HTML结构：

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

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

     // whatever code

});

但是，我不希望处理程序捕获li的{​​{1}}点击次数。我试过这个：

z-index: auto

和

$(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>。也许这可以用来帮忙吗？

修改

这是HTML结构：我想要抓住上层<span>，而不是另一台

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);

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想要的li元素的第一个孩子保证是a而您不想要的那个孩子的第一个孩子总是span，那么你最好选择基于该条件而不是因为它们的风格匹配元素通常是脆弱的：

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