ネストされた要素

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] .delete') 

：私はこれらのようなからから削除ボタンを取得しようとした場合

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

をしかし：

だから私はそうのようなトップレベルのパネルを選択することができます子ボタンを取得します。

私はとにかくHTMLを変更できません。どうすればこのことをやり遂げることができますか？

Answer 1

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

は、トリックを行うようです。

jsfiddle

私はそれが提供するHTMLで動作するように取得するために.panelに.panel-groupを変更しました。

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

あなたは子供のメソッドを使用することができます。

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