Tengo este componente llamado topComponent que tiene un title , un body y link . El Title es un H2.
<div class="topComponent"> <div class="Wrapper"> <h2 class="title">About The Eartht</h2> <div class="container htmlText"> <p>Here is some information about the Earth..</p> </div> <div class="infoLink"> <a href="........." target="_blank"</a> </div> </div> </div> Sin embargo, si este encabezado de title está anidado dentro de otro encabezado que es un H2, entonces estoy tratando de convertir este encabezado de title en un h3. Básicamente, digamos que hay un HTML como este:
<h2 class="bigHeader">About The Earth Parent</h2> // Parent Header <div class="topComponent"> <div class="Wrapper"> <h2 class="title">About The Eartht</h2> <div class="container htmlText"> <p>Here is some information about the Earth..</p> </div> <div class="infoLink"> <a href="........." target="_blank"</a> </div> </div> </div> Aquí, hay un encabezado principal llamado bigHeader que es un H2. Entonces, en este caso, quiero que el encabezado del title cambie a H3 en lugar de h2, ya que ya hay un padre h2 en la parte superior.
Pregunta : ¿Cómo podemos determinar si el título debe ser h2 o h3 dependiendo de si hubo un padre H2 para este elemento a través de un script?
Aquí está el Javascript:
$(Wrapper).each(function(){ var count = 0; $("h2").each(function(){ if(count > 0) { $(this).replaceWith($('<h3>' + this.innerHTML + '</h3>')); } count++; }); }); El problema con el código anterior es que también está cambiando los encabezados h2 fuera de este componente. Esperaba que los cambios solo ocurrieran dentro de la Wrapper . No estoy seguro de por qué no está seleccionando los H2 solo en el envoltorio.
Aquí hay una solución simple.
var container = document.getElementById("container"); var h2 = container.getElementsByTagName("h2"); if(h2.length == 2){ var h3 = document.createElement('h3'); h3.innerText = h2.innerText h2[1].replaceWith(h3); } <div id="container"> <h2 class="bigHeader">About The Earth Parent</h2> // Parent Header <div class="topComponent"> <div class="Wrapper"> <h2 class="title">About The Eartht</h2> <div class="container htmlText"> <p>Here is some information about the Earth..</p> </div> <div class="infoLink"> <a href="........." target="_blank" </a> </div> </div> </div> </div>no está claro cómo el HTML realmente juega en esto. Pero si sigue el mismo patrón con un div como hermano del primer h2, puede usar un selector para encontrarlo. Puedes usar replaceWith
$("h2 + div h2").replaceWith(function() { return $("<h3>", { class: this.className, html: $(this).html() }); }); h2 { color: red; } h3 { color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 class="bigHeader">About The Earth Parent</h2> <div class="topComponent"> <div class="Wrapper"> <h2 class="title">About The Earth</h2> <div class="container htmlText"> <p>Here is some information about the Earth..</p> </div> <div class="infoLink"> <a href="#" target="_blank">X</a> </div> </div> </div>Puede llamar al h2 dentro de la clase Wrapper.
Con $(Wrapper).each vez que diga, ingrese esa función por niño, no diga cambiar el niño, y está cambiando todos los h2 de la página
$(Wrapper).each(function(){ var count = 0; $(".Wrapper h2").each(function(){ if(count > 0) { $(this).replaceWith($('<h3>' + this.innerHTML + '</h3>')); } count++; }); });