指定した数以降をランダム表示にしたい

Question

前提・実現したいこと

新着ボックス（リスト）を作成しているのですが、
新しいアイテムの4つ目までを固定して、
それより以前のものをランダムに表示したい。
という内容になります。

またシステムから出るデータなのでリストを2つにしたり
すると重複データが出てしまうため困っています。

現在は、以下のコードを使って全てランダムにしています。

使用中のコード

<script>
$(function() {
	var arr = [];

	$("#random li").each(function() {
		arr.push($(this).html());
	});
		arr.sort(function() {
		return Math.random() - Math.random();
	});
	$("#random").empty();

	for(i=0; i < arr.length; i++) {
	$("#random").append('<li>' + arr[i] + '</li>');
	}
　});
</script>

<ul id="random">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul<!--random-->

試したこと

リスト後半にクラスをつけてそこをシャッフルさせようとしたのですが、
うまくできませんでした。

<script>
$(function() {
	var arr = [];

	$("#random li.rdm").each(function() {
		arr.push($(this).html());
	});
		arr.sort(function() {
		return Math.random() - Math.random();
	});
	$("#random").empty();

	for(i=0; i < arr.length; i++) {
	$("#random").append('<li>' + arr[i] + '</li>');
	}
　});
</script>

<ul id="random">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li class="rdm">5</li>
  <li class="rdm">6</li>
  <li class="rdm">7</li>
  <li class="rdm">8</li>
  <li class="rdm">9</li>
</ul<!--random-->

宜しくお願い致します。

Comments

[kei344]

質問タグにある「JAVA」は「JavaScript」の間違いでは？

[lingwood]

kei344
失礼いたしました。修正いたしました。
ご指摘ありがとうございます。

Answer 1

<script>
$(function(){
  $('#random .rdm').get().map(function(x){
    return [x,Math.random()];
  }).sort(function(x,y){
    return x[1]-y[1];
  }).forEach(function(x){
    $(x[0]).appendTo($('#random'));
  });
});
</script>
<ul id="random">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li class="rdm">5</li>
  <li class="rdm">6</li>
  <li class="rdm">7</li>
  <li class="rdm">8</li>
  <li class="rdm">9</li>
</ul>

Comments

[yambejp]

＞ リストを2つにしたりすると重複データが出てしまう

の状況がわかりません。具体例があれば提示ください

[lingwood]

yambejp　様
コードありがとうございます！たった今、試行して完璧でした！！本当にありがとうございます！！！
事後ですが、リストを2つというのは、<ul>を2つにするという意味になります。
データベースから出力するのですが「4つだけ出力」することはできるのですが「5つ目以降を出力」というのができなかったためです。
わかりにくくすみません。いずれに本当に助かりました。ありがとうございました！！
またの際にも何卒宜しくお願い致します。

Answer 2

リスト後半にクラスをつけてそこをシャッフルさせようとしたのですが、

全部消してしまっているからです。

 // $("#random").empty();
    $("#random li.rdm").remove();
```**動くサンプル：**[https://jsfiddle.net/bgpfe4z9/](https://jsfiddle.net/bgpfe4z9/)

---

【.remove() | jQuery API Documentation】
[https://api.jquery.com/remove/](https://api.jquery.com/remove/)

Comments

[lingwood]

kei344　様
ご回答ならびにサンプルありがとうございます！！実はそれを試したのですがシステムからデータが出ているためなぜかループしてデータが重複してしまうという現象が発生していました。
せっかくご回答いただいたのにすみません。でも、ありがとうございました！！
またの際にも宜しくお願いします！！！