在浏览器刷新时替换特定列的内容答案

【问题标题】：Replace specific columns content on browser refresh在浏览器刷新时替换特定列的内容
【发布时间】：2020-11-16 17:13:43
【问题描述】：

$(".home").append($(".home .coco").sort(function () {
    return Math.random() - 0.5;
}));

.row{margin-bottom: 30px;}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>


<div class="home">
<div class="container">
<div class="row">
<div class="col-sm-3">A</div>
<div class="col-sm-3 coco">B</div>
<div class="col-sm-3">C</div>
<div class="col-sm-3">D</div>
</div>

<div class="row">
<div class="col-sm-3 coco">1</div>
<div class="col-sm-3">2</div>
<div class="col-sm-3 coco">3</div>
<div class="col-sm-3">4</div>
</div>

<div class="row">
<div class="col-sm-3">Red</div>
<div class="col-sm-3">Blue</div>
<div class="col-sm-3">Green</div>
<div class="col-sm-3 coco">Black</div>
</div>
</div>
</div>

随机播放列内容与其他具有相同类 (coco) 的列。现在它是洗牌的内容，但不在行。并从行中删除列。

【问题讨论】：

标签： javascript jquery css wordpress bootstrap-4

【解决方案1】：

如果.home 列表仅包含.coco 项，您的方法将有效。否则会弄乱列表。

这里的想法是复制.coco 项目，对它们进行排序，然后循环遍历.home 列表，并将.coco 项目逐一替换为排序后的.coco 项目。

$(function() {
    let newArrangement = $(".home .coco").clone().sort(function() {
        return Math.random() - 0.5;
    });
    
    $('.home .coco').each(function(index) {       
        $(this).replaceWith(newArrangement[index]);
    });
});

“制作副本”部分很重要。如果您不这样做，新替换的项目可能会再次被替换。

截图

演示

https://jsfiddle.net/davidliang2008/7pb5n8ut/50/

【讨论】：