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

2024-05-20 • 问答

社区晚上好。我试图检查有关此主题的类似问题和答案。我找到了对 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>

您将已排序的元素附加到正文中。

您应该改为使用 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>

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

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

大家都在问