javascript - 将具有特定类别的 div 移动到顶部

Question

单击按钮时，我想将“active”类添加到具有“sort”类的div。然后，将具有“active”类的 div 移动到容器中的顶部位置。结果将按以下顺序排列:2,4,1,3

$('button').click(function(){
  $('.container div').each(function() {
  if($('.container div').hasClass('sort')) {
    $(this).addClass('active').prependTo('.container'); }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div>1</div>
  <div class="sort">2</div>
  <div>3</div>
  <div class="sort">4</div> 
</div>

<button>click</button>    

Answer 1

您遇到的问题在这里:

if($('.container div').hasClass('sort')) {
    $(this).addClass('active').prependTo('.container'); }
});

您需要在每个循环中引用当前元素而不是整个集合。

$('button').click(function(){
  $('.container div').each(function() {
    if($(this).hasClass('sort')) {
      $(this).addClass('active').prependTo('.container'); 
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div>1</div>
  <div class="sort">2</div>
  <div>3</div>
  <div class="sort">4</div> 
</div>
<button>click</button>