Firs...">
Clever Geek Handbook

Find titles like this and then put a new word above that div

<HTML>

<HEAD></HEAD>

<BODY BGCOLOR="#ffffff">


  <DIV>
    <H3 CLASS="Heading-1">First Level Heading</H3> 
    <DIV>
      <H4 CLASS="Heading-2">Second Level Heading</H4>
      <DIV>
        <H6 CLASS="Heading-3">Third Level Heading</H6>
        <P CLASS="Tab-Text-7">Some Text Here</P>
      </DIV>


      <DIV>
        <H6 CLASS="Heading-3">Third Level Heading</H6>
        <TABLE>
          <TR>
            <TD ROWSPAN="1" COLSPAN="1">
              Some Cotents Here
            </TD>
          </TR>
        </TABLE>
      </DIV>

      <DIV>
        <H6 CLASS="Heading-3">Third Level Heading</H6>
        <TABLE>
          <TR>
            <TD ROWSPAN="1" COLSPAN="1" class="green1">
              Some text goes here
            </TD>
          </TR>
        </TABLE>
      </DIV>


      <DIV>
        <H6 CLASS="Heading-3">Third level Heading</H6>
      </DIV>
      <DIV>
        <H6 CLASS="Heading-4">Fourth Level Heading </H6>
        Some Text Goes here
      </DIV>


      <DIV>
        <H4 CLASS="Heading-2">Second Level Heading</H4>
        <DIV>
          <H6 CLASS="Heading-3">Third Level Heading   </H6>
          <TABLE>
            <TR>
              <TD ROWSPAN="1" COLSPAN="1" class="blue1">
                SOme text goes here
              </TD>
            </TR>
          </TABLE>
        </DIV>
      </DIV> <DIV>
      <H6 CLASS="Heading-3">Third Level Heading</H6>
      Some text goes here
    </DIV>
  </DIV>
</BODY>

</HTML>

Expected Result: -

<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="#ffffff">

xxxxx

<DIV>
<H3 CLASS="Heading-1">First Level Heading</H3>  
<DIV>
<H4 CLASS="Heading-2">Second Level Heading</H4>
<DIV>
<H6 CLASS="Heading-3">Third Level Heading</H6>
<P CLASS="Tab-Text-7">Some Text Here</P>
</DIV>

xxxxx

<DIV>
<H6 CLASS="Heading-3">Third Level Heading</H6>
<TABLE>
<TR>
<TD ROWSPAN="1" COLSPAN="1">
Some Cotents Here
</TD>
</TR>
</TABLE>
</DIV>

xxxxx

<DIV>
<H6 CLASS="Heading-3">Third Level Heading</H6>
<TABLE>
<TR>
<TD ROWSPAN="1" COLSPAN="1"class="green1">   
Some text goes here
</TD>
</TR>
</TABLE>
</DIV>

xxxxx

<DIV>
<H6 CLASS="Heading-3">Third level Heading</H6>
</DIV>
<DIV>
<H6 CLASS="Heading-4">Fourth Level Heading </H6>
Some Text Goes here
</DIV>

xxxxx

<DIV>
<H4 CLASS="Heading-2">Second Level Heading</H4>
<DIV>
<H6 CLASS="Heading-3">Third Level Heading   </H6>
<TABLE>
<TR>
<TD ROWSPAN="1" COLSPAN="1" class="blue1">
SOme text goes here
</TD>
</TR>
</TABLE>
</DIV>

xxxxx

<DIV>
<H6 CLASS="Heading-3">Third Level Heading</H6>
Some text goes here
</DIV>
</BODY>
</HTML>

From the above code, I want to search for headers and place "XXXXX" above those headers. If it contains any child heading (ie Heading 1 contains Heading 2), then at that time it should place the word "XXXXX" above the parent heading instead of the child heading. (heading 1 is the parent)

Can anyone help me.

+3


source to share


3 answers


THIS is what you want.

1) JQuery validates every title of the document.
2) Then it searches if the parent has a different title before.
3) If headers before the parent are not added before this header.



$(document).find('h1, h2, h3, h4, h5, h6').each(function() {
    if ($(this).parent().prev().is('h1, h2, h3, h4, h5, h6') != true) {
        $(this).parent().before('<p>xxxxxxx</p>');
    }
});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV>
<H3 CLASS="Heading-1">First Level Heading</H3>  
<DIV>
<H4 CLASS="Heading-2">Second Level Heading</H4>
<DIV>
<H6 CLASS="Heading-3">Third Level Heading</H6>
<P CLASS="Tab-Text-7">Some Text Here</P>
</DIV>


<DIV>
<H6 CLASS="Heading-3">Third Level Heading</H6>
<TABLE>
<TR>
<TD ROWSPAN="1" COLSPAN="1">
Some Cotents Here
</TD>
</TR>
</TABLE>
</DIV>


<div>
<H6 CLASS="Heading-3">Third Level Heading</H6>
<TABLE>
<TR>
<TD ROWSPAN="1" COLSPAN="1"class="green1">   
Some text goes here
</TD>
</TR>
</TABLE>
</DIV>


<div>
<H6 CLASS="Heading-3">Third level Heading</H6>
<DIV>
<H6 CLASS="Heading-4">Fourth Level Heading </H6>
Some Text Goes here
</DIV></DIV>


<DIV>
<H4 CLASS="Heading-2">Second Level Heading</H4>
<DIV>
<H6 CLASS="Heading-3">Third Level Heading   </H6>
<TABLE>
<TR>
<TD ROWSPAN="1" COLSPAN="1" class="blue1">
SOme text goes here
</TD>
</TR>
</TABLE>
</DIV>


<DIV>
<H6 CLASS="Heading-3">Third Level Heading</H6>
Some text goes here
</DIV>
Run codeHide result


+2


source


I think you need this code



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <DIV class="Find-Me">
    <H3 CLASS="Heading-1">First Level Heading</H3>  
    <DIV>
      <H4 CLASS="Heading-2">Second Level Heading</H4>
   <DIV>
   <H6 CLASS="Heading-3">Third Level Heading</H6>
   <P CLASS="Tab-Text-7">Some Text Here</P>
  </DIV>

  <DIV class="Find-Me">
   <H6 CLASS="Heading-3">Third Level Heading</H6>
   <TABLE>
     <TR>
      <TD ROWSPAN="1" COLSPAN="1">
       Some Cotents Here
      </TD>
     </TR>
   </TABLE>
</DIV>
  <script>
    function Insert() {
      $('<p>xxxx</p>').insertBefore('.Find-Me');
    }
    Insert();
    </script>
</body>
Run codeHide result


+1


source 


$('body > div').has([class^='Heading-']).prepend('XXXXXX');
0


source






More articles:


All Articles