Question

我有一个部分，里面有几个div：

<section class="list">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</section>

我使用 jQuery 在部分中添加了一个额外的项目：

<section class="list">
 <div class="extra-item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</section>

我想要的是在该部分中随机排序这个额外的前置项目 - 所以所有其他项目都保持其顺序，但这个额外的项目会在每次页面刷新时进行排序：

即 1：

<section class="list">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="extra-item"></div>
</section>

即 2：

<section class="list">
 <div class="item"></div>
 <div class="item"></div>
 <div class="extra-item"></div>
 <div class="item"></div>
</section>

等等...

使用下面的代码，我设法对部分内的所有项目进行了随机排序；但是是否可以简单地重新订购这个预先添加的项目并保持其余项目的顺序？

$(function () {
    var parent = $(".list");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});

谢谢

Answer 1

与其在添加 extra-item 后尝试排序，不如使用

将其插入随机位置

$(".list>div").eq(__random_position__).before("<div class='extra-item'>")

要获得 random 位置，请使用：

var children = $(".list").children();
var position = Math.floor(Math.random() * children.length);

但是，如果您还希望它出现在列表的开头和结尾，则需要一些额外的处理：

var children = $(".list").children();
var position = Math.floor(Math.random() * (children.length + 1));
if (position == children.length)
  children.eq(position-1).after('<div class="extra-item"></div>');
else
  children.eq(position).before('<div class="extra-item"></div>');

.list > div { height:20px; margin-bottom: 0.5em; }
.item { border: 1px solid green; }
.extra-item { border: 1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="list">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</section>

Answer 2

随机化动作和位置的解决方案：

// i suppose extra-item is already in the list
const pos = Math.floor(Math.random() * ($(".list .item").length));
const action = Math.floor(Math.random() * 2);

var item = $(".extra-item").detach();

if(action == 0){
  item.insertBefore(`.item:nth(${pos})`);
}else{
  item.insertAfter(`.item:nth(${pos})`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="list">
 <div class="extra-item">111</div>
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
</section>

为了避免内存泄漏，使用 detach() 而不是 remove();

对部分内的项目进行随机排序/排序

2 个答案: