Estoy filtrando todo el DOM para reemplazar algunas cadenas con otras cadenas.
Para esto escribí el siguiente código:
$('body :not(script)').contents().filter(function() { return this.nodeType === 3; }).replaceWith(function() { return this.nodeValue.replace('T 0','T 0'); }); ¿Cómo puedo excluir algunas áreas? Por ejemplo, quiero que no se considere el DIV con la clase .example .
Intenté lo siguiente:
$('body :not(script):not(.example)').contents().filter(function() { return this.nodeType === 3; }).replaceWith(function() { return this.nodeValue.replace('T 0','T 0'); });¿Por qué esto no parece funcionar?
En este momento, le está diciendo a jQuery que excluya el nodo .example , que tiene nodos secundarios, que se incluirán.
En su selector :not() agregue un * después de la clase. Esto le indicará a jQuery que excluya todos los nodos debajo del nodo principal.
En CSS el * es un selector universal
El selector universal CSS (*) coincide con elementos de cualquier tipo.
Aquí hay una versión de trabajo: (Tenga en cuenta que cambié a - para mostrar visualmente el cambio)
$( "input:not(:checked) + span" ).css( "background-color", "yellow" ); $( "input").attr( "disabled", "disabled" ); $('body :not(script):not(div.example *)').contents().filter(function() { return this.nodeType === 3; }).replaceWith(function() { return this.nodeValue.replace('T 0','T--0'); }); <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>not demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="example"> <p>Remains the same:</p> <h1>T 0</h1> </div> <div> <p>Changes:</p> <h1>T 0</h1> </div> </body> </html>