Search code examples
jquerycssparagraph

How to wrap text within a p tag when there are other elements

Is there a way, perhaps using jQuery that I can wrap text within a

tag when there are other elements also in it?

For example I have this html:

<p class="form-field form-field-wide wc_bookings_field_persons_71">
    <label for="wc_bookings_field_persons_71">Children:</label>
    <input type="number" value="1" step="1" min="1" max="150" name="wc_bookings_field_persons_71" id="wc_bookings_field_persons_71"> 
Enter the number of Children coming to Soft Play
</p>

However, I would like to wrap the text so I can hide it and create a tooltip for it

Solution

  • You can use Jquery .contents()

    Here an example:

    $(".wc_bookings_field_persons_71")
  .contents()
  .filter(function () {
    return this.nodeType === 3;
  })
  .each(function () {
    $(this).wrap('<a href id="added_a_tag"></a>');
  });