javascript - 选择嵌套元素

Question

我有一个像这样的页面层次结构:

<div class="panel" attribute-id="1">
  <button class="delete">
  <div class="panel" attribute-id="2" association-id="20">
    <button class="delete">
  </div>
</div>
....

所以我有一堆这些面板，里面有嵌套面板，我试图仅为顶级面板的删除按钮创建点击处理程序(因此那些直接位于没有关联的面板内的面板) ID)。父面板和子面板之间唯一的区别是子面板具有额外的属性“association-id”。

所以我只能像这样选择顶级面板:

$('.panel[attribute-id]:not([association-id]')

但是如果我尝试从中获取删除按钮，例如:

$('.panel[attribute-id]:not([association-id] .delete')

显然我仍然会得到子按钮。

无论如何我都无法修改 html，我该怎么做呢？

Answer 1

$(':not(.panel[attribute-id][association-id]) > .delete')

似乎可以解决问题。

jsfiddle

我已将 .panel-group 更改为 .panel 以使其能够与提供的 HTML 一起使用。