将 div 作为另一个 :之后

Question

我想实现的事情很容易解释，但我尝试了每一个来实现它。
我希望它★出现在 06 之后使用 jQuery。

感谢您的任何帮助。

这些数字是由另一个函数创建的，因此.numdiv 在原始 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>