選擇嵌套元素

Question

我有這樣的頁面層次結構：

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

因此，我有一堆這樣的面板，其中有嵌套面板，並且我試圖為頂級面板的刪除按鈕創建on click處理程序（因此，在面板內部的這些按鈕沒有關聯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選擇器“ .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>

Answer 3

您可以使用children方法：

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