如何使用JQuery在標籤之間反轉內容？

例如，我有：如何使用JQuery在標籤之間反轉內容？

<span class="a">abcdef</span> 
<span class="b">123456</span> 
<span class="b">abc<span class="c">def</span>ghi</span>

而想要逆轉只有這樣

<span class="a">abcdef</span> 
654321 
ihg<span class="c">def</span>cba

如何用jQuery做<span class="b">之間的文本？

來源

2013-05-27 Bánh Gạo

你真的想解開跨度呢？如果你知道span只包含文本而沒有標籤，反轉本身就很容易。 –

是的，我也想展開這個跨度。我剛剛編輯了這個問題來說清楚。 –

你試圖實現什麼？您是否試圖複製瀏覽器通常具有的某種從右到左的功能？ –

-1

像這樣的東西可能會有所幫助：

var span$ = $('.b'), 
    txt = span$.text(); 
span$.prev().after(txt); 
span$.remove();

也有unwrap功能IH JQuery的http://api.jquery.com/unwrap/

來源

2013-05-27 18:03:08

這並沒有達到扭轉內容的效果 –

你想要做的可謂是什麼：

反向順序子節點每個span.b。
顛倒每個文本子節點中的文本。
最後，用每個內容替換它們。

jQuery的不具有reverse方法，但它有一個get方法，可以jQuery對象轉換成一個數組，數組做有一個reverse方法。然後我們把元素放回去。 jQuery不能處理文本節點內容（並且它們的父元素的文本內容對於我們的目的來說不夠好），但是相應的本地DOM接口是非常標準化的，所以我們可以使用它。不幸的是，字符串沒有ES5的反向方法。幸運的是，我們可以將它們轉換爲數組。

unwrap似乎是一個有用的方法在這裏，但文檔並不意味着它將適用於非元素節點。此外，我們想要刪除span，即使它是空的。 unwrap沒有達到那個目標。相反，我們可以使用replaceWith。

進一步優化：因爲我們無論如何都放棄了跨度，所以我們並不需要在跨度內實際上扭轉其子女。 replaceWith接受函數作爲參數。我們可以使用它來減少撥打replaceWith的電話數量。此外，我們希望避免$(this).contents().get()，因爲它涉及每次迭代創建兩個額外的jQuery元素。相反，我們可以使用類似數組的childNodes，它保持相同。雖然這個數組沒有自己的reverse方法，但是數組所具有的方法也可以在這裏工作。

這應該做的工作：

$("span.b").replaceWith(function(){ 
    var children = this.childNodes; 
    for(var i = 0; i < children.length; i++){ 
    if(children[i].nodeType === Node.TEXT_NODE){ 
     children[i].nodeValue = children[i].nodeValue.split("").reverse().join(""); 
    } 
    } 
    return [].reverse.call(children) 
}

來源

2013-05-27 20:04:41

尼斯和完整的答案。 –

真棒回答。 – vincent

如何使用JQuery在標籤之間反轉內容？

回答

相關問題