创建新跨越的标签为他人跨越

-1

<div> 
    <b>Hello</b> 
    <span id=x class=highlight_red> 
     how are 
     <span id=y class=highlight_blue> you John?</span> 
    </span> 
</div>

现在例如，使用jQuery或JavaScript，我想成立一个新的跨越标签上的文字“你”（http://jsfiddle.net/kgw57v3e/ ）

<div> 
    <b>Hello</b> 
    <span id=x class=highlight_red> 
     how 
     <span id=z class=highlight_yellow>are 
     <span id=y class=highlight_blue> you</span> John?</span> 
    </span> 
</div>

问题是跨度#z会在字符串“John？”后关闭。而不是在“你”之后。有没有办法解决这种问题在JavaScript或jQuery中？（这是一个例子，如果可以有与其他上下文一起工作的解决方案）。

谢谢。

来源

2014-12-01 user3115251

我认为你误解了这里发生的事情。这是预期的特异性行为 - 应用于内部元素的CSS优先。跨度不会在颜色改变的地方关闭。使用浏览器的文档检查器来查看。 – isherwood 2014-12-01 21:04:19

跨度不能像那样重叠。他们只能互相嵌套。因此，为了模拟这种行为，您必须在'are'周围添加一个跨度'z'，并在'y'内部围绕'you'添加一个跨度'z'。您当然可以使用JavaScript来做到这一点，但这并不是微不足道的，我也不知道任何现成的解决方案。显然，你不需要具有相同id（'z'）的元素，但这是一个较小的实现细节。 – GolezTrol 2014-12-01 21:08:16

谢谢@GolezTrol，我喜欢你的解决方案，是的，这并不容易。 – user3115251 2014-12-01 22:21:38

$('#y').after("<span id='z'>bla bla</span>");

来源

2014-12-01 21:15:12

创建新跨越的标签为他人跨越

回答

相关问题