Question

单击按钮时，我要向具有“ 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>

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

1 个答案: