jQuery appendTo scoping problem, data of all elements gets copied-CodePudding

I have let's say 10 sections on a page with:

<div >
  <h2 >Title
    <span >subtitle</span>
  </h2>
</div>

I need to move the subheader span to above the h2. That sort of works with:

$('.subheader').appendTo( $('.section') );

Only the problem is that the subheaders of ALL 10 sections get copied to each section. How do I scope the moving of the subheader to only the subheader of that section?

I can't edit the source code as this is a WooCommerce page. Thanks!

CodePudding user response：

Try prepend/prependTo

$('.subheader').each(function() {
  $(this).prependTo(this.closest('.section'));
  // or
  //  $(this).closest('.section').prepend(this)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <h2 >Title1
    <span >subtitle 1</span>
  </h2>
</div>

<div >
  <h2 >Title 2
    <span >subtitle 2</span>
  </h2>
</div>

or using section

$('.section').each(function() {
  $(this).prepend($('.subheader',this))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <h2 >Title1
    <span >subtitle 1</span>
  </h2>
</div>

<div >
  <h2 >Title 2
    <span >subtitle 2</span>
  </h2>
</div>