Ein Element und seine Inhaltselemente ausschließen

Question

Es gibt Tonnen von Elementen in meiner Seite und ich versuche, nur eine div einschließlich aller Inhalte druckbar zu machen.

Ich habe diese CSS:

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

Nun, bevor </body> möchte ich ein jQuery-Code auszuführen, so dass jeder zu div aber .content und die darin enthaltenen Elemente .no-print Klasse hinzufügt.

auszuschließen .content Ich weiß, was ich zu tun habe:

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

Aber auch ihr Inhalt auszuschließen Ich habe versucht:

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

und

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

aber keiner von ihnen habe das gewünschte Ergebnis. Der Code fügt allen divs .no-print hinzu. und Drucken zeigt eine leere Seite.

Update: Ich glaube nicht, dass html hier erforderlich wäre. aber als Kommentare danach fragen, füge ich ein Beispiel:

<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

können Sie verwenden Filter:

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>