选择嵌套元素

Question

I have a page hierarchy like this:

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

So I have a bunch of these panels with nested panels inside, and I'm trying to create on on click handler for the delete buttons of the top level panels only (so the ones immediately inside panels that do not have an association id). The only different between the parent and child panels is that the child ones have the extra attribute "association-id".

So I can select the top level panels only like so:

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

But if I try to get the delete buttons from from these like:

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

Obviously I'm still going to get the child buttons.

I can't modify the html in anyway, how could I go about doing this?

Answer 1

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

seems to do the trick.

jsfiddle

I've changed .panel-group to .panel to get it to work with the HTML provided.

Answer 2

Wrap them all in a div and assign that div a unique class. Then you can use jquery selector ".panel-group > .panel" to get only direct children of top level.

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