絶対配置要素でJqueryラップ関数を使用する

Question

absoluteに配置された要素に対してjQuery wrap関数を使用しようとしています。以下は私のコードです。

子要素をクリックすると、別のdivで同じものを折り返していますが、機能していません。代わりに、ラッパー要素が画面の上部に表示されます。子要素をラップするには、cssまたはjsをどのように操作できますか。

$(document).ready(function() { 
 
    $("#child").click(function() { 
 
    $(this).wrap("<div class='wrapper'></div>") 
 
    }); 
 
});

#container { 
 
    position: relative; 
 
    height: 500px; 
 
    width: 600px; 
 
    background: #ccc 
 
} 
 
#child { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #444; 
 
    border: 2px solid red; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.wrapper { 
 
    border: 1px dashed green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="child"> 
 

 
    </div> 
 
</div>

Answer 1

ちょうどあなたが簡単にそれを行うことができwrapperクラス

$(document).ready(function() { 
 
    $("#child").click(function() { 
 
    $(this).wrap("<div class='wrapper'></div>") 
 
    }); 
 
});

#container { 
 
    position: relative; 
 
    height: 500px; 
 
    width: 600px; 
 
    background: #ccc 
 
} 
 
#child { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #444; 
 
    border: 2px solid red; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.wrapper { 
 
    border: 1px dashed green; 
 
    height: 200px; 
 
    width: 200px; 
 
    position:absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="child"> 
 

 
    </div> 
 
</div>

Answer 2

jQueryがラップ（）関数でうまく機能しています。 cssを使用してラッパーdivに幅と高さを追加します。それは正常に動作しています。

$(document).ready(function() { 
 
    $("#child").click(function() { 
 
    $(this).wrap("<div class='wrapper'></div>") 
 
    }); 
 
});

#container { 
 
    position: relative; 
 
    height: 500px; 
 
    width: 600px; 
 
    background: #ccc 
 
} 
 
#child { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #444; 
 
    border: 2px solid red; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.wrapper { 
 
    border: 1px dashed green; width:100%; height:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="child"> 
 

 
    </div> 
 
</div>

Answer 3

Use append position wrap 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#child").click(function() { 
    $('#child').append("<div class='wrapper'></div>") 
    }); 
}); 
</script> 
<style> 
    #container { 
    position: relative; 
    height: 500px; 
    width: 600px; 
    background: #ccc 
} 
#child { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    background: #444; 
    border: 2px solid red; 
    height: 200px; 
    width: 200px; 
} 
.wrapper { 
    border: 1px dashed green; 
} 
</style> 
<div id="container"> 
    <div id="child"> 

    </div> 
</div> 

Answer 4

を更新していますが、どのような結果になるだろうあなたは期待していませんでした。その理由は、絶対配置された要素の周りに要素をラップすると、その要素はその親になります。

子供の周りに罫線を追加すると仮定します。これを行うには、それらを絶対的に配置された親に追加することもできます。たとえば、次のように

$(document).ready(function() { 
 
    var iterator = 1; 
 
    $("#child").click(function() { 
 
    $('#container').prepend(
 
    $('<div class="wrapper">').css({ 
 
     height:(200+iterator*2)+'px', 
 
     width:(200+iterator*2)+'px'}) 
 
    ); 
 
    $('#container').append('</div>'); 
 
    iterator++; 
 
    }); 
 
});

#container { 
 
    position: relative; 
 
    height: 500px; 
 
    width: 600px; 
 
    background: #ccc 
 
} 
 
#child { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #444; 
 
    border: 2px solid red; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.wrapper { 
 
    border: 1px dashed green; 
 
    position:absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="child"> 
 

 
    </div> 
 
</div>