javascript - 排除项目及其内容元素

Question

我的页面中有大量元素，我试图只制作一个 div包括所有可打印的内容。

我有这个CSS:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

现在之前</body>我想运行 jQuery 代码，以便添加 .no-print每类div但是.content及其包含的元素。

排除.content我知道我必须做什么:

$('div:not(.content)').addClass('no-print');

但为了排除它的内容，我尝试过:

$('div:not(.content,.content *)').addClass('no-print');

和

$('div:not(.content),div:not(.content *)').addClass('no-print');

但他们都没有达到预期的结果。代码添加 .no-print到所有的div。打印时显示空白页。

更新: 我认为这里不需要 html。但根据评论的要求，我添加了一个示例:

<div>
   <div class="header">...</div>
   <div class="nav">...</div>
   <div class="menu>
       <ul>
          <li>menu item 1</li>
          <li>menu item 2</li>
          <li>menu item 3</li>
          <li>menu item 4</li>
          <li>menu item 5</li>
      </ul>       
   </div>
   <div class="sidebar">...</div>
   <div class="content">
       <div><table>....</table></div>
       <div><table>....</table></div>
       <div><table>....</table></div>
  </div>
   <div class="footer">...</div>
</div>

Answer 1

您可以使用过滤器:

var elements = $('div:not(.content) *').filter(function(index, element) {
      return $(this).closest('div.content').length == 0;
});

$(function () {
  var elements = $('div:not(.content) *').filter(function(index, element) {
    return $(this).closest('div.content').length == 0;
  });
  
  elements.each(function(index, element) {
       console.log(index + ' --->  ' + element.outerHTML.substring(0, 30) + '....');
   });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div>
    <div class="header">YES...</div>
    <div class="nav">YES...</div>
    <div class="menu">
        YES
       <ul>
           YES
          <li>menu item 1</li>
          <li>menu item 2</li>
          <li>menu item 3</li>
          <li>menu item 4</li>
          <li>menu item 5</li>
      </ul>
   </div>
   <div class="sidebar">YES...</div>
<div class="content">
    NO
    <div>NO<table>....</table></div>
    <div>NO<table>....</table></div>
    <div>NO<table>....</table></div>
</div>
<div class="footer">YES...</div>
</div>