與節點僅圍繞文本

Question

我有一些HTML是形式

<span class="prefix">something</span> (Optional) 
Text 
<span class="badge">Something else</span> (optional, can be multiple) 
<span class="postfix">Another thing</span> 

我想換行文本，而不是span S，在另一個跨度，這樣我可以提取和使用替換jQuery的必要。我無法編輯生成此HTML的後端代碼。鑑於我不能預先知道第一個跨度是否在那裏，或者最後會有多少跨度，是否有任何方法可以將純文本包裝起來以便可以對其進行操作？

我希望能得到一個輸出看起來是這樣的：

<span class="prefix">something</span> 
<span class="txt">Text</span> 
<span class="badge">something else</span>... 
<span class="postfix">another thing</span> 

Answer 1

1. filter()容器元素的contents()於那些純文本節點
2. wrap()他們在一個跨度

$('#container').contents().filter(function() { 
 
    return $(this)[0].nodeValue && $(this)[0].nodeValue.trim(); 
 
}).wrap('<span class="txt"/>');

.txt{ 
 
    color:green; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="container"> 
 
    <span class="prefix">something</span> 
 
    Text 
 
    <span class="badge">Something else</span> 
 
    <span class="postfix">Another thing</span> 
 
</div>

Answer 2

是的，給你的跨度的ID，如id =「textX」。然後，您可以使用js或jquery $（「＃textX」）對其進行操作。

Answer 3

試試這個：

基於

對這樣的回答：https://stackoverflow.com/a/5291776/616535