1

jQuery の wrap() 関数に出くわしました。

2 つの div の間にテキストがない場合よりも、間にテキストがある 2 つの div タグをラップしようとすると、どういうわけか動作が異なります。

jquery:

var wrapper1 = '<div class="wrap1">something in between<div class="innerwrap1">';
$('.content1').wrap(wrapper1);    
var wrapper2 = '<div class="wrap2"><div class="innerwrap2">';
$('.content2').wrap(wrapper2);

結果の HTML は次のとおりです。

<div class="wrap1">
    something in between
    <div class="innerwrap1"></div>  <!-- wtf? -->
    <div class="content1">Lorem</div>
</div> 
<div class="wrap2">
    <div class="innerwrap2">
        <div class="content2">Ipsum</div>
    </div>
</div>

ここにフィドルがあります： http://jsfiddle.net/RfJN5/

最初の結果はかなり驚きですね。divの間にテキストがあるかどうかに関係なく、両方の終了divを.content1の後に配置する必要があると思います。

もちろん、動作を制御するために終了 div を自分で追加する方が安全であることはわかっていますが、これはある種のバグですか、それとも jQuery ラップの使用方法の誤解ですか?

前もって感謝します！

4

1 に答える 1

3

それは期待どおりに機能し、あなたwrapper1はラップされるメインオブジェクトになりcontent1、あなたが閉じていないのでinnerwrapper1、jqueryがそれを閉じます。内部ラッパーでラップする場合は、これをオブジェクトにして、コンテンツをラップしてから、内部ラッパーをラッパーに追加します。

var wrapper1 = $('<div class="wrap1">something in between</div>'),
    innerWrapper = $('<div class="innerwrap1" />');

$('.content1').wrap(innerWrapper);    
wrapper1.append($('.innerwrap1'));

例

于 2013-08-06T15:05:03.620 に答える