항목 및 해당 콘텐츠 요소 제외

Question

내 페이지에는 수많은 요소가 있으며 해당 내용을 모두 인쇄 할 수 있도록 div 만 만들려고합니다. 그 div하지만 .content과 그 요소를 포함한 모든에 .no-print 클래스를 추가 있도록

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

지금 </body> 전에 내가 jQuery 코드를 실행하려면 :

나는이 CSS를 가지고있다.

.content이 내가해야 할 일을 알고 제외하려면 :

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

그러나 또한 콘텐츠를 제외하기 위해 나는 노력 :

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

및

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

을하지만, 그들 중 누구도 없다 원하는 결과를 얻는다. 이 코드는 모든 div에 .no-print을 추가합니다. 인쇄하면 빈 페이지가 표시됩니다.

업데이트 : 여기에 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>