將div設置爲：在另一個之後

Question

我希望能夠實現的事情非常簡單，但我嘗試着實現它。
我很喜歡★使用jQuery在06之後出現。

感謝您的任何幫助。

這些數字是由另一個函數創建的，因此.num div在原始html代碼中看起來是空的。

$(".like,.like-yes").insertAfter('.num');

.none{display:none} 
 
body{font-family:Arial;font-size:5vw;} 
 
.num{bottom:.5em;position:fixed;width:100%;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=num>01 02 03 04 05 06</div> 
 
<div class=like>★</div><div class="like-yes none">★</div>

Answer 1

您應該使用append()，把它們變成行內框

• CSS更新

$(".num").append($('.like,.like-yes'));

body { 
 
    font-family: Arial; 
 
    font-size: 5vw; 
 
} 
 

 
.like, 
 
.like-yes { 
 
    display: inline; 
 
} 
 

 
.none { 
 
    display: none 
 
} 
 

 
.num { 
 
    bottom: .5em; 
 
    position: fixed; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=num>01 02 03 04 05 06</div> 
 
<div class=like>★</div> 
 
<div class="like-yes none">★</div>

• 或HTML更新

$(".num").append($('.like,.like-yes'));

body { 
 
    font-family: Arial; 
 
    font-size: 5vw; 
 
} 
 
.none { 
 
    display: none; 
 
} 
 

 
.num { 
 
    bottom: .5em; 
 
    position: fixed; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=num>01 02 03 04 05 06</div> 
 
<span class=like>★</span> 
 
<span class="like-yes none">★</span>

Answer 2

另一種解決方案，無需JavaScript代碼。它可以用純CSS完成。然後，您可以使用jQuery它的樣式（顏色，能見度...）

.none{display:none} 
 
body{font-family:Arial;font-size:5vw;} 
 
.num{bottom:.5em;position:fixed;width:100%;text-align:center;} 
 
.num:after{content:'★'}

<div class=num>01 02 03 04 05 06</div>

那麼，如果一開始需要點擊。中庸之道適應代碼到適合您需要的行爲上點擊：

$(".num").append('<a href="#">★</a>');

.none{display:none} 
 
body{font-family:Arial;font-size:5vw;} 
 
.num{bottom:.5em;position:fixed;width:100%;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=num>01 02 03 04 05 06</div>