如何在移动元素时保持对齐

Question

$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});

$('button').on('click', function(){
$('.act').insertAfter($('.act').next());
});

.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}

.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}

.act{
background:skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
</div>
<br>
<button>CLICK</button>

单击第一个框将其激活。

然后点击按钮将其向右移动。

您看到对齐丢失了，即框之间没有空格。

如何防止这种情况？

Answer 1

不要使用 insertAfterafter，这会弄乱 justify 样式，只需在 div 之间切换位置：

$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});

$('button').on('click', function(){

    div1 = $('.act');
    div2 = $('.act').next();

    tdiv1 = div1.clone();
    tdiv2 = div2.clone();

    if(!div2.is(':empty')){
        div1.replaceWith(tdiv2);
        div2.replaceWith(tdiv1);

        $('.box').on('click', function(){
            $('.act').removeClass('act');
            $(this).addClass('act');
        });
    }
//   $('.act').insertAfter($('.act').next());
});

.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}

.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}

.act{
background:skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
<br>
<button>CLICK</button>

Answer 2

我建议采用与之前答案相同的方法，即通过克隆和元素之间的切换。但是在上一个。点击几下后，元素就会消失。

我已经处理了 .next() 不可用的情况，因此循环了兄弟元素。

$('.box').on('click', function (){
  $('.act').removeClass('act');
  $(this).addClass('act');
});

$('button').on('click', function (){ 
  if($('.act').length > 0)
  {
    activeBox = $('.act');
    nextBox = $('.act').next('.box').length > 0 ? $('.act').next('.box') : $('.box').eq(0);

    cloneActiveBox = activeBox.clone();
    cloneNextBox = nextBox.clone(); 

    activeBox.replaceWith(cloneNextBox);
    nextBox.replaceWith(cloneActiveBox); 

    $('.box').on('click', function (){
      $('.act').removeClass('act');
      $(this).addClass('act');
    });    
  } 
});

Link 工作 fiddle: http://jsfiddle.net/43psy50b/2/

如何在移动元素时保持对齐

how to keep alignment while moving elements

jquery

justify