Javascript 选择嵌套元素

我有如下页面层次结构：

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

但如果我尝试从以下位置获取删除按钮：

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

显然，我还是要给孩子买纽扣

---

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

将它们都包装在一个div中，并为该div分配一个唯一的类。然后您可以使用jquery选择器“.panel group>.panel”只获取顶级的直接子级

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

---

将它们全部包装在一个div中，并为该div分配一个唯一的类。然后您可以使用jquery选择器“.panel group>.panel”只获取顶级的直接子级

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

---

您可以使用children方法：

---

$（'.panel group[attribute id]'）。children（'button'）。first（）

您可以使用children方法：

$（'.panel group[attribute id'））.children（'button'）.first（）

看起来很有意思

我已将

.panel group

更改为

.panel

，以使其与提供的HTML一起工作

看起来很有意思

---

我已将

.panel group

更改为

.panel

，以使其与提供的HTML一起工作。

每一个操作-“我无论如何都不能修改HTML”很好。哦，html的其余部分是什么样子的？也许可以使用其他已经存在的东西。小组组长在哪里？基本上，您需要的是下一个升级元素。如果这是面板组，那么您只需执行“.panel group>.panel”。“>”操作符相对于所有的子操作符获得下一个级别。每个操作-“我无论如何都不能修改html”很好。哦，html的其余部分是什么样子的？也许可以使用其他已经存在的东西。小组组长在哪里？基本上，您需要的是下一个升级元素。如果这是面板组，那么您只需执行“.panel group>.panel”。“>”操作符相对于所有子级获得下一级。

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