1

例えば：

から

<div>
   whats up!
   <div> whats up2! </div>
   thank you for your help
   <div></div>
</div>

に

<div>
   <span>whats up!</span>
   <div><span> whats up2! </span></div>
   <span>thank you for your help</span>
   <div></div> <!---STAYS THE SAME -->
</div>

jQueryまたは純粋なJavaScriptでこのようなものを作成するにはどうすればよいですか？

4

2 に答える 2

4

このHTMLを持っている：

<div id="container" >
   whats up!
   <div> whats up2! </div>
   thank you for your help
</div>​​​

あなたはこのようなことをすることができます：

var nodes = document.getElementById('container').childNodes;

$(nodes).each(function(ind, el){
    if(el.nodeType == 3)
        $(el).wrap('<span>');
    else
        $(el).wrapInner('<span>');
});

私の知る限り、jQueryでテキストノードを取得することはできません（間違っている場合は修正してください）。したがって、純粋なJavaScriptで取得し、jQueryのメソッドラップを使用できます。

http://jsfiddle.net/hyJA6/2/

于 2012-12-28T09:44:59.130 に答える
0

完全を期すために、提供されているソリューション@davidsは、より深い階層で機能するように拡張されており、「純粋な」jqueryで次のように記述できます。

$('#container')
.find('*')
.andSelf()
.contents()
.filter(function() {
    return this.nodeType == 3;
})
.wrap('<span>')

これは次のようになります。＃containerとそのすべての適切なDOM子の完全なコンテンツを取得し、テキストノード（nodeType == 3）のみを保持してそれらを。でラップします<span>。

大きなDOMツリーに適用すると、これはかなり遅くなることに注意してください。

于 2012-12-28T10:33:04.813 に答える