2012-01-04 19 views
1

対象結果:jquery append/prepend/wrapInner?

<li><a><span class="icon"></span><span class="text">Link Text</span></a></li>


は、HTMLの開始:

<li><a>Link Text</a></li> 

私は.append()と別に.wrapInner().prepend()を使用しようとしましたが、所望の出力を与えるでもないしました。


$('li a').wrapInner("<span class='icon'></span><span class='text'></span>");

出力:

<li><a><span class="icon">Link Text</span></a></li>


$('li a').prepend("<span class='icon'></span><span class='text'>"); 
$('li a').append("</span>"); 

出力:

<li><a><span class="icon"></span><span class='text'></span>Link Text</a></li>私はjsfiddle hereを設定しました。 私が望むものを達成する方法はありますか?このような

答えて

5

はここに私のjsFiddleをご確認ください。あなたは1行にしたい場合は、私は、以下のような

$('li a').wrapInner("<span class='text'></span>"); 

$('li a').prepend("<span class='icon'></span>"); 

を使用し、ここで

$('li a').wrapInner("<span class='text'></span>").prepend("<span class='icon'></span>"); 

以下

DEMOとして

+0

なぜあなたはあなたの開始と終了のタグを逆にしましたか? '" "' –

+0

これも機能します、ありがとう! 1行のvers。 @Matt_H解決策よりコード上でわずかに軽いです。 –

+0

タグ逆転で私の悪いです。編集しました –

2

何か作業をする必要があります:

$('li a').html('<span class="icon"></span><span class="text">' + $('li a').html() + '</span>'); 
+0

ありがとうございます!私は '.html()'が問題になると思っていましたが、jQueryでそれを解決するには熟練していませんでした。 –

+0

これが正解であれば、チェックしてください。ありがとう。 –

+1

複数の 'li a '要素がある場合、これは機能しません。それは本当に使用すべきではない破壊的なアプローチです。 –

0

は、これは少し良く動作しているようです:)

var curText = $('li a').text(); 

$('li a').html("<span class='icon'></span><span class='text'>"+curText+"</span>"); 

http://jsfiddle.net/zqUmL/5/

0

を使用してこれを行うに何か問題はありますか?

text = $('li a').html(); 
$('li a').html("<span class='icon'></span><span class='text'>"+text+"</span>"); 
関連する問題