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

【问题标题】：how to keep alignment while moving elements如何在移动元素时保持对齐
【发布时间】：2019-04-27 09:17:04
【问题描述】：

$('.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>

单击第一个框使其处于活动状态。

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

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

如何预防？

【问题讨论】：

标签： jquery justify

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

【讨论】：

非常感谢，它有效，但我会保持帖子开放，看看是否有更多解决方案。

【解决方案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');
    });    
  } 
});

链接到工作小提琴：http://jsfiddle.net/43psy50b/2/

【讨论】：