질문

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

Expand snippet

동일한 class (coco)를 가진 다른 열과 임의로 열 내용을 섞습니다. 이제 콘텐츠를 셔플하지만 행을 벗어납니다. 그리고 행에서 열을 제거하십시오.

답변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]);
    });
});