Ensure that all `h2` tags have a `span` inserted

Question

I'm running these on page load to ensure that all h2 tags have a span inserted (it's a large WordPress site that needs to have this done to get the right styles)

$('.bottomLine').each(function() {
    $(this).insertAfter($(this).parent().find('.price'));
});
$('.prod-desc > h2').each(function() {
    $(this).wrapInner('<span />');
})
$('h2.review_text').each(function() {
    $(this).wrapInner('<span />');
})
$('.related > h2').each(function() {
    $(this).wrapInner('<span />');
})
$('.up-sells > h2').each(function() {
    $(this).wrapInner('<span />');
})

EDIT

I'm kinda getting the message that this is a bad idea so I will expand upon why I think I need to.

I need to create this out of h2 tags.

Which I currently make using:

<div class="seporator">
  <span>Join us on instgram</span>
</div>

and SCSS

.seporator {
  text-align: center;
  text-transform: uppercase;
  padding: 40px 40px 46px;
  width: 100%;

  span {
    padding-bottom: 10px;
    border-bottom: 1px solid $red;
    line-height: 48px;
    margin-bottom: 10px;
  }
}

Throughout the WordPress site I see that the previous theme has been using a CSS hook to style h2 elements within the page as breaks. Therefore when I perform the insertion of a <span> and add h2 to my scss I get the design.

  h2 {
    @extend .seporator;
    font-size: 1.5rem;
  }

If this underlined, correctly spaced design can be achieved using purely h2 tags then I would love to hear about it.

Answer 1

I would agree with discussion in comments that this should be looked at as a stop-gap solution only, as the real answer here is to change the HTML source, or better yet, the CSS styling for the desired h2's such that you don't need these span's at all.

If you truly want to wrap every h2 like this, why is this not just:

$('h2').wrapInner('<span />');

Note here that I also skip the unnecessary call to each(), as wrapInner() will already be applied against every element in the jQuery collection.

Your other function against .bottomLine also seems odd in that you are just moving one set of items in DOM to different positions, something that would unnecessarily cause document reflow. Again, this is something that should probably be fixed in source.

Answer 2

Since the other answer and comments already pointed out the semantical optimizations, here's a rather syntactical one. The code does exactly the same as the one you have, but faster.

$(".bottomLine").each(function() {
    $(this).insertAfter($(this).parent().find(".price"));
});
$(".prod-desc > h2, h2.review_text, .related > h2, .up-sells > h2").wrapInner("<span />");

Answer 3

This is an answer to the edited question asking how to create the underlining without a wrapper. The only reason for a wrapper in this example is centering an unknown-width headline. You can just as well set a width and use the margin: auto trick to center it.

Drawing the red line does not depend on the centering rules.

.dummy {
  height: 20px;
  background: #eee;
}

.center {
  text-align: center;
}

.call-to-action-line {
  display: inline-block;
  border-bottom: 1px solid red;
  padding: 0.5em 0;
  margin: 1.5em 0;
  text-transform: uppercase;
  font-size: medium;
  font-family: sans-serif;
  font-weight: 500;
}

<div class="dummy"></div>
<div class="center">
  <h2 class="call-to-action-line">join us on instagram</h2>
</div>
<div class="dummy"></div>