Использование функции обертки JQuery с элементом с абсолютным размещением

Question

Я пытаюсь использовать функцию jQuery wrap на элементе, который расположен absolute. Следующий мой код.

При нажатии дочернего элемента я обертываю то же самое с другим 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 хорошо работает с функцией обертки(). Добавьте ширину и высоту в свою оболочку div с помощью css. и он работает нормально.

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