排除项目及其内容元素

Question

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

我有这个 css:

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

现在在 </body> 之前，我想运行一个 jQuery 代码，以便将 .no-print class 添加到每个 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');

但其中 none 个达到了预期的结果。该代码将 .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>

排除项目及其内容元素

Exclude an item and its content elements

javascript

jquery

jquery-selectors