jQuery li 的第一个 child 是跨度的选择器

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> 作为第一个 child，而其他的有一个 <span>。也许这可以用来帮助？

编辑

这是HTML结构：我想抓住上面的li，而不是另一个

Answer 1

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

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

Answer 2

因为您不想 select 具有 style='z-index: auto;' 的元素，然后使用 :not() selector and :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>

jQuery li 的第一个 child 是跨度的选择器

jQuery selector for li whose first child is a span

html

jquery

jquery-selectors