选择嵌套元素

我有一个页面层次结构是这样的：选择嵌套元素

<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

选择嵌套元素

回答

相关问题