javascript - jQuery : Split the DOM Node using jQuery

Question

我的问题是使用 jquery 分割 Dom 元素。

<span class="start">
  <span class="second">
   new text <span class='split'>is written</span> in this place.
 </span>
</span>

我想像这样分割上面的 DOM。

<span class="start"><span class="second">new text</span></span>

<span class="start"><span class="second">is written</span></span>

<span class="start"><span class="second">in this place.</span></span>

请大家给我一些建议。

Answer 1

一种方法是:

last_text=$('.split')[0].nextSibling; //get textNode after split span
prev_text=$('.split')[0].previousSibling; //get text Node before split span
current=$('.split').text(); //get split span text

$('.second').html(' '); //clear current html


cloned1=$('.start').clone(); // clone el
cloned1.insertAfter($('.start'));
cloned2=$('.start').first().clone(); //clone one more
cloned2.insertAfter($('.start').last());
//set text for elements
$('.start .second').eq(0).html(prev_text);
$('.start .second').eq(1).html(current);
$('.start .second').eq(2).html(last_text);

演示:

last_text=$('.split')[0].nextSibling; //get textNode after split span
prev_text=$('.split')[0].previousSibling; //get text Node before split span
current=$('.split').text(); //get split span text

$('.second').html(' '); //clear current html


cloned1=$('.start').clone(); // clone el
cloned1.insertAfter($('.start'));
cloned2=$('.start').first().clone(); //clone one more
cloned2.insertAfter($('.start').last());
//set text for elements
$('.start .second').eq(0).html(prev_text);
$('.start .second').eq(1).html(current);
$('.start .second').eq(2).html(last_text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="start">
  <span class="second">
   new text <span class='split'>is written</span> in this place.
 </span>
</span>

附注如果没有类(我猜可能是这种情况)，您将不得不使用不同的选择器，以目标跨度(在容器内？)，使用 eq()，也许，但是，基本上，这个简单的逻辑应该有效。 .