排除項目及其內容元素

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>