如果 Header 通过脚本嵌套在 H2 中，如何将其更改为 H3？

Question

I have this component called topComponent that has a title , body, and link. The Title is an 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>

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 class="bigHeader">About The Eartht</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>

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?

I was thinking maybe to use the $(this).closest(":header").text() to find out what the parent header is, but I am not sure if that's the best approach?

Answer 1

This is maybe what you are trying to achieve. You need to have a particular selector. I have taken the given example but for your scenario, you need to have a strong selector.

 $(document).ready(function(e){ var cnt = 0; $("h2").each(function(){ if(cnt > 0) { $(this).replaceWith($('<h3>' + this.innerHTML + '</h3>')); } cnt++; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 class="bigHeader">About The Eartht 1</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>