如何使用javascript / jquery包裝帶有標簽的元素的同級文本？

Question

我想轉換：

<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>  

變成：

<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>  

如何使用javascript或jquery更改它？

Answer 1

您需要使用.contents()和.last()從.element末尾選擇目標文本，並使用.wrap()將其與span標簽包裝在一起。

 $(".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>