1
\$\begingroup\$

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.

Example

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.

\$\endgroup\$
2
  • 2
    \$\begingroup\$ Why do you want to insert the span-element with JavaScript? Can't you update your WordPress template or use a custom filter to create the element on the server side? \$\endgroup\$ Apr 8 '17 at 20:55
  • \$\begingroup\$ Unfortunately, the h2 tags are all embedded in the content editor... they need to be made into fully styled and underlined page dividers. This seems like my best way until the site's content is reviewed in a few months. \$\endgroup\$
    – Taylorsuk
    Apr 8 '17 at 20:57
5
\$\begingroup\$

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.

\$\endgroup\$
4
\$\begingroup\$

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 />");
\$\endgroup\$
1
  • \$\begingroup\$ +1 A much better approach to creating the collection of target h2's if the OP truly needs to use those specific selectors. This would optimize document reflow. \$\endgroup\$
    – Mike Brant
    Apr 9 '17 at 2:39
0
\$\begingroup\$

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>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.