選擇嵌套元素

我有一個頁面層次結構是這樣的：選擇嵌套元素

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

所以我有一堆這些面板裏面嵌套的面板，和我想上單擊處理程序創建上的刪除按鈕只有頂層面板（所以面板中沒有關聯ID的面板）。父母面板和子面板之間的唯一區別在於，子面板具有額外的屬性「關聯ID」。

所以我可以選擇頂級面板只有像這樣：

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

但是，如果我試圖從這些像獲得了刪除按鈕：

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

顯然，我仍然會得到孩子的按鈕。

我無法修改html，我怎麼能這樣做？

來源

2016-04-21 SpeedOfRound

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

似乎這樣的伎倆。

jsfiddle

我已經改變了.panel-group到.panel得到它與提供的HTML工作。

來源

2016-04-21 20:36:45 spaceman

將它們全部包裝在一個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>

來源

2016-04-21 20:28:31

每個OP - 「我無法修改html」 – IrkenInvader

好。 OP，剩下的html是什麼樣的？可以使用已經存在的其他東西。 panel_group div在哪裏？基本上，你需要的是下一個級別的元素。如果這是面板組，那麼你可以做「.panel-group> .panel」。「>」運算符與所有的孩子相比都有了下一個級別。 –

你可以用孩子的方法：

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

來源

2016-04-21 20:28:57

選擇嵌套元素

回答

相關問題