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一起使用。

Answer 2

将它们全部包装在一个div中，并为该div分配一个唯一的类。然后你可以使用jquery selector＆＃34; .panel-group＆gt; .panel＆＃34;只获得顶级直接孩子。

<div class="panel-group">

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

 <div class="panel" attribute-id="11">
  <button class="delete">
  <div class="panel" attribute-id="12" association-id="120">
    <button class="delete">
  </div>
 </div>

</div>

Answer 3

您可以使用children方法：

$('.panel-group[attribute-id]').children('button').first()

选择嵌套元素

3 个答案: