How to wrap sibling text of elements with tag using javascript/jquery?

Question

I would like to transform:

<span class="element">
  <span class="word">The</span>
  <span class="word">car</span>
  <span class="word">speed</span>
  <span class="word">was</span>
  40km/s
</span>

into:

<span class="element">
  <span class="word">The</span>
  <span class="word">car</span>
  <span class="word">speed</span>
  <span class="word">was</span>
  <span class="data">40km/s</span>
</span>

How could I change it using javascript or jquery?

The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific roadblock you're running into a minimal reproducible example. For more information, please see How to Ask and take the tour. — CertainPerformance
– CertainPerformance, Commented Nov 17, 2018 at 12:03

Mohammad · Accepted Answer · 2018-11-17 12:33:32Z

2

You need to use .contents() and .last() to select target text from end of .element and use .wrap() to wrap it with span tag.

$(".element").contents().last().wrap("<span class='data'></span>");

.data{color:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="element">
  <span class="word">The</span>
  <span class="word">car</span>
  <span class="word">speed</span>
  <span class="word">was</span>
  40km/s
</span>

edited Nov 17, 2018 at 12:33

answered Nov 17, 2018 at 12:09

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to wrap sibling text of elements with tag using javascript/jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related