1

2 つの要素の間でコンテンツをラップする要素を作成するにはどうすればよいでしょうか?

私が扱っているコードの簡単な例を次に示します。

<p>
Some text some text <span class="foo">some more text</span> additional text.
</p>
<p>
I am bad at coming up with <span class="foo">fake text</span>, I should have looked it up lorem ipsum somewhere.
</p>

私が望むのは、最初のスパンの終わりと 2 番目のスパンの始まりの間のすべてのテキストを div でラップして、たとえばテキストの色を変えることができるようにすることです。

そのようなことは可能ですか？そうでない場合、これを回避する賢い方法はありますか?

編集: 一日の終わりにコードをどのように表示したいかは完全にはわかりません。私が気にするのは結果だけです。つまり、親が異なるにもかかわらず、スパン間のテキストに特定のスタイルを適用できるということです。たとえば、最終結果が次のようになるように、テキストを設定してその周りに境界線を付けることができれば、本当に素晴らしいことです。

いくつかのテキスト いくつかのテキスト いくつかのテキスト

------------------------------
|additional text              |
|I am bad at coming up with   |
-----------------------------

偽のテキスト、どこかで lorem ipsum を調べる必要がありました。

4

1 に答える 1

2

これは恐ろしいですが、私が思いつくことができる最高のものです：

$('p').each(function(i){
    var that = $(this),
        foo = that.find('.foo');
    if (i==0){
        var tN = foo[0].nextSibling;
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertAfter(foo);
    }
    else if (i==1){
        var tN = foo[0].previousSibling;
        console.log(tN,tN.nodeValue);
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertBefore(foo);
    }
    this.removeChild(tN);
});

JS フィドルのデモ。

わずかに改善され、わずかに恐ろしくなくなりました:

$('p').each(function(){
    var that = $(this),
        foo = that.find('.foo');
    if (that.next().find('.foo').length){
        $(foo[0].nextSibling).wrap('<span class="fooSibling"></span>')
    }
    else if (that.prev().find('.foo').length) {
        $(foo[0].previousSibling).wrap('<span class="fooSibling"></span>')
    }
});

JS フィドルのデモ。

于 2013-03-11T19:47:47.880 に答える