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

【问题标题】：Javascript sort divs Alphabetically without destroying CSS Form StyleJavascript按字母顺序排序div而不破坏CSS表单样式
【发布时间】：2021-10-07 08:05:46
【问题描述】：

社区晚安。我试图检查有关此主题的类似问题和答案。我找到了对 div 进行排序的方法。但是 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>

【问题讨论】：

标签： javascript html css sorting

【解决方案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>

【讨论】：

@Lasticot 没问题。如果它解决了您的问题，请考虑接受我的回答。