Question

给出以下标记：

<div class=foo>
  <!-- comments -->
  some junk content
  <input type=button value=click />
  <div class=bar>
    good content
  </div>
  more junk content
  <div class=bar>
    more good content
  </div>
  even more junk
</div>

我需要删除除bar div之外的所有内容，所以我最终只会：

  <div class=bar>
    good content
  </div>
  <div class=bar>
    more good content
  </div>

我尝试过：$('.foo :not(.bar)').hide();但是不符合此选择的元素显然仍然存在。

是否有一个匹配所有的选择器，或者我应该将条形div提取到新的var？

Answer 1

您需要将内容包装在.foo元素内，位于单独元素中的.bar元素之间。否则，你不会隐藏这些混蛋而不隐藏整个.foo元素。

<div class=foo>
  <!-- comments -->
  <div>some junk content</div>
  <input type=button value=click />
  <div class=bar>
    good content
  </div>
  <div>more junk content</div>
  <div class=bar>
    more good content
  </div>
  <div>even more junk</div>
</div>

有了这样的包装，你应该能够做到这样的事情：

$(".foo > *:not(.bar)").hide();

或者，如果您不关心能够撤消：

$(".foo > *:not(.bar)").remove();

Answer 2

又快又脏：

$(function(){
    var html = [];
    $('.bar').each(function(i, item) { html.push($(this).html()); });
    $('.foo').html('<div class="bar">' + html.join('</div><div class="bar">') + '</div>');
});

jQuery如何删除或隐藏除选定的<div> </div>之外的所有html

2 个答案: