創建新跨越的標籤爲他人跨越

-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

創建新跨越的標籤爲他人跨越

回答

相關問題