Div消失后，我添加脚本

Question

我一直试图在我的页面上创建一个自动刷新时钟，但在将脚本添加到我的文件后，时钟周围的div消失了，所以它不使用我添加到div的CSS。<div class="clock_item">是消失的那个。

如果我在div.clocktwo之前关闭div.clock_item，那么它不会消失，但我希望div.clocktwo留在div.clock_item内。

谢谢你的帮助!

function loadlink() {
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php', function() {
$(this).unwrap();
});
}
loadlink();
setInterval(function() {
loadlink()
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clock_item">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
<path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
<path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
<path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
<path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg> <!--// MEL LETTERS -->
<h3>
MELBOURNE
</h3>

<div class="clocktwo">
</div>
</div>

Answer 1

在你的代码中，你已经使用$(this).unwrap()，所以unwrap从选定的元素中删除父元素，这就是你的外部元素被删除的原因，因为你的选择器是内部div即:clocktwo和外部是clock_item。相反，使用wrap方法，它将在匹配元素集中的每个元素周围包装html结构。即:

$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
$(this).wrap();
});

Answer 2

我想这个可以解决不要在div标签

中编写脚本

<div class="clock_item">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
<path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
<path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
<path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
<path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg>   // MEL LETTERS

<h3>
MELBOURNE
</h3>

<div class="clocktwo">
</div>
</div>
<script>
function loadlink(){
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
$(this).unwrap();
});
}
loadlink(); 
setInterval(function(){
loadlink() 
}, 5000);
</script>