Javascript按字母顺序排序div而不破坏CSS表单样式

Question

大家晚上好。我试图检查关于这个主题的类似问题和答案。我找到了排序的方法。但是css样式被破坏了。我不明白为什么不保留CSS样式?(例如，我有flex，新的div按字母排序没有flex，没有样式css)

<div class=lignes-1 id=Order onclick="OrderFunction()>

<p class=Nickname>Victor</p>
<p class=Nickname>William</p>
<p class=Nickname>Natalia</p>
</div> 

<script>   
function OrderFunction() {
OrderlistNickName();
sortThem();

}
function sortThem () {
$('.Nickname').sort(function(a, b) {
if (a.textContent < b.textContent) {
return -1;
} else {
return 1;
}
}).appendTo('body');
}
</script>
<style>
.lignes-1{
display: flex;
align-items: center;
background: rgb(255, 255, 255);
width: 660px;
left: 0px;
margin-left: 16px;
margin-bottom: 30px;
}
.Nickname {
font-size: 16px;
text-align: center;
margin-left: 0;
margin-right: 0;
margin-bottom: 0px;
margin-top: 0px;
width: 100px;
}
</style>

Answer 1

您正在将已排序的元素追加到正文。

你应该在元素后面加上lignes-1类。

function OrderFunction() {
sortThem();
}
function sortThem() {
$('.Nickname').sort(function(a, b) {
if (a.textContent < b.textContent) {
return -1;
} else {
return 1;
}
}).appendTo('.lignes-1');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=lignes-1 id=Order onclick="OrderFunction()">
<p class=Nickname>Victor</p>
<p class=Nickname>William</p>
<p class=Nickname>Natalia</p>
</div>

<style>
.lignes-1 {
display: flex;
align-items: center;
background: rgb(255, 255, 255);
width: 660px;
left: 0px;
margin-left: 16px;
margin-bottom: 30px;
}

.Nickname {
font-size: 16px;
text-align: center;
margin-left: 0;
margin-right: 0;
margin-bottom: 0px;
margin-top: 0px;
width: 100px;
}
</style>