jQuery选择了李其第一个孩子是一个跨度

Question

下面是一个HTML结构我不能改变：

我成功地连接一个click事件处理那些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

如果你想li元素的第一个孩子是有保证成为a，而那些你不会的总是span，你最好基于该条件进行选择，因为他们的样式中的匹配元素通常是脆弱：

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

Answer 2

当你不想选择具有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>