Verwenden Jquery Wrap-Funktion mit absolut platziert Element

Question

Ich versuche, jQuery wrap Funktion für ein Element, das absolute positioniert ist. Folgendes ist mein Code.

Beim Klicken auf das Child-Element wickle ich dasselbe mit einem anderen Div, aber es funktioniert nicht. Stattdessen erscheint das Wrapper-Element oben auf dem Bildschirm. Wie kann ich css oder js manipulieren, um das untergeordnete Element zu umbrechen.

$(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

einfach aktualisieren, um die wrapper Klasse

$(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 arbeitet gut mit Wrap() Funktion. Fügen Sie Ihrem Wrapperdiv Breite und Höhe mit CSS hinzu. und es funktioniert gut.

$(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

Sie einfach das tun könnte, aber Sie würden ein Ergebnis bekommen, was Du hast es nicht erwartet. Der Grund dafür ist, wenn Sie ein Element um ein absolut positioniertes Element wickeln, wird es dessen Elternteil.

Ich nehme an, dass Sie um das Kind Grenzen hinzufügen möchten. Um dies zu tun, können Sie sie auch dem absolut positionierten Elternteil hinzufügen. Zum Beispiel:

$(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>