Using JavaScript, how to change Header to an H3 if it nested inside an H2?-CodePudding

I have this component called topComponent that has a title, body, and link. The Title is an H2.

<div > 
        <div >
            <h2 >About The Eartht</h2>
            <div >
             <p>Here is some information about the Earth..</p>
         </div>
            <div >
            <a href="........." target="_blank"</a>
            </div>
        </div>
    </div>

However, if this title header is nested inside another header that is an H2, then I am trying make this title header an h3. Basically let say there is an HTML like this:

    <h2 >About The Earth Parent</h2> // Parent Header
    <div > 
                <div >
                    <h2 >About The Eartht</h2>
                    <div >
                     <p>Here is some information about the Earth..</p>
                 </div>
                    <div >
                    <a href="........." target="_blank"</a>
                    </div>
                </div>
            </div>

Here, there is a parent header called bigHeader that is an H2. So in this case, I want the title header to change to H3 instead of h2, since there is already a parent h2 on top.

Question: How can we determine if the title should be an h2 or h3 depending on if there was an H2 parent for this element through a script?

Here is the javascript:

$(Wrapper).each(function(){
  var count = 0;
  $("h2").each(function(){
    if(count > 0)
    {
      $(this).replaceWith($('<h3>'   this.innerHTML   '</h3>'));
    }
    count  ;
  });
});

The problem with the above code is that, it's changing the h2 headers outside of this component as well. I was hoping the changes will only happen within the Wrapper div. Not sure why it's not selecting the H2's only with in the wrapper.

CodePudding user response：

unclear how the HTML really plays into this. But if it follows the same pattern with a div as a sibling to the first h2, you can use a selector to find it. You can than use 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 >About The Earth Parent</h2>
<div >
  <div >
    <h2 >About The Earth</h2>
    <div >
      <p>Here is some information about the Earth..</p>
    </div>
    <div >
      <a href="#" target="_blank">X</a>
    </div>
  </div>
</div>

CodePudding user response：

Here is a simple solution.

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 >About The Earth Parent</h2> // Parent Header
  <div >
    <div >
      <h2 >About The Eartht</h2>
      <div >
        <p>Here is some information about the Earth..</p>
      </div>
      <div >
        <a href="........." target="_blank" </a>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

U can call the h2 inside of Wrapper class.

With $(Wrapper).each u say, enter in that function per child, dont say change the child, and you are changin all h2 of page

$(Wrapper).each(function(){
  var count = 0;
  $(".Wrapper h2").each(function(){
    if(count > 0)
    {
      $(this).replaceWith($('<h3>'   this.innerHTML   '</h3>'));
    }
    count  ;
  });
});