アイテムとそのコンテンツ要素を除外します

Question

私のページにはたくさんの要素があり、その内容はすべて印刷可能なdivのみにしようとしています。

私はこのCSSを持っている：

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

は今</body>前に私はそれがすべてのdivが、.contentとそれを含む要素に.no-printクラスが追加されますので、jQueryのコードを実行したいです。私は私がしなければならないものを知っている.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>