ロードする度に4個の中からランダムに2つだけ表示さたい

Question

<li>〜</li>が4個あったとして その中からランダムに2つだけを表示させたいです。 (例で4個中２個としていますが組み合わせ自由にできるとありがたいです・・ex10個中3個とか)

追記：
リストで並べたものを「ロードの度に並び替える」というところまで記述しております。
これに「４個中2個だけ表示させる」(リロードする度にランダム)という記述を追記したいのですが書き方がわかりませんでした。

例：dポイントクラブの「おすすめの情報」というところのような想定です。
表示されているのは30個ですが本当は30以上のバナーがあると思います。
https://dpoint.jp/index.html

稚拙な文章ですみませんがご教授お願いいたします。

<!-- html -->
<ul class="contentBox">
  <li>
　　<p>お店01</p>
    <div class="img"><a href="" target="_blank"><img src="images/01.png" alt="いちご"></a></div>
  </li>
  <li>
　　<p>お店02</p>
　　<div class="img"><a href="" target="_blank"><img src="images/02.png" alt="にんじん"></a></div>
  </li>
  <li>
　　<p>お店03</p>
　　<div class="img"><a href="" target="_blank"><img src="images/03.png" alt="いちご"></a></div>
  </li>
  <li>
　　<p>お店03</p>
　　<div class="img"><a href="" target="_blank"><img src="images/04.png" alt="にんじん"></a></div>
  </li>
  <li>
　　<p>お店04</p>
　　<div class="img"><a href="" target="_blank"><img src="images/05.png" alt="にんじん"></a></div>
  </li>
</ul>

<!-- ランダム表示 -->

$(function(){
  var randomContent = [];
  $('.contentBox li').each(function() {
    randomContent.push($(this).html());
  });
  
  randomContent.sort(function() {
    return Math.random() - Math.random();
  });
  $('.contentBox li').empty();
    i = 0;
    $('.contentBox li').each(function() {
    $(this).append(randomContent[i]);
    i++;
  });
});

Comments

[kei344]

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[okama]

コメントありがとうございます。
補足と例サイトを追記致しました。

Answer 1

$(function(){
  var randomContent = [];
  $('.contentBox li').each(function() {
    randomContent.push($(this).html());
  });

  randomContent.sort(function() {
    return Math.random() - Math.random();
  });
  $('.contentBox li').empty();
  i = 0;
  $('.contentBox li').each(function() {
    if ( i > 2 ) return;// 単純に3つしか出さない場合
    $(this).append(randomContent[i]);
    i++;
  });
});
```**動くサンプル：**[https://jsfiddle.net/rx0qLnzy/1/](https://jsfiddle.net/rx0qLnzy/1/)

---


```js
$(function(){
  var randomContent = [];
  $('.contentBox li').each(function() {
    randomContent.push($(this).html());
  });

  randomContent.sort(function() {
    return Math.random() - Math.random();
  });
  $('.contentBox li').empty();
  $('.contentBox li:nth-of-type(3) ~ li').remove(); // 3以降を先に削除
  $('.contentBox li').each(function(i) {
    $(this).append(randomContent[i]);
  });
});
```**動くサンプル：**[https://jsfiddle.net/rx0qLnzy/2/](https://jsfiddle.net/rx0qLnzy/2/)

Comments

[okama]

ありがとうございます！

IEでも動作確認でき大変感動しております。。。
ご丁寧にありがとうございました！

Answer 2

こんにちは

一例として、以下のような考え方の回答を挙げます。（全 <li>の個数を n、そのうち表示する個数を m とします。）

• <ul> のスタイルに、display: flex; を追加する。またこの追加により、ulで囲まれる要素のスタイルにも調整が必要であれば適宜修正する。
• 0以上(n-1)以下のn個の整数を含み、並び順はランダムな配列 randomOrders を作る。（全5個であれば、たとえば[3,1,4,2,0]など)
• 全<li>を each でループさせ、インデクスi の <li> に以下のCSSを設定する。　　

　・order : 上記の randomOrders[i]の値を設定
・display : i がm よりも小さければ block、そうでなければ none を設定

上記のステップの中で、

• 0以上(n-1)以下のn個の整数を含み、並び順はランダムな配列 randomOrders を作る。

というコードを自作するのもよいですが、配列やオブジェクトの操作で便利なライブラリlodashの _.shuffle を使うこともできます。

以下は上記の考え方によるコードです。

ul { display: flex; flex-direction:column; }

  const items = $('li');
  const n = items.length;
  const m = 2;
  const randomOrders = _.shuffle([...Array(n)].map((_e, i) => i));
    
  items.each(function(i) {
    const order = randomOrders[i];
    $(this).css({ order, display: order < m ? 'block' : 'none' });    
  });

• 動作確認用codepen: https://codepen.io/jun68ykt/pen/KKVNrOQ

参考になれば幸いです。

追記

参考までに、もう一案挙げておきます。こちらは <ul> のCSS display を flex にする必要はありませんし、また <li> にもスタイルを追加しません。ただし、ランダムに表示する２個以外の li はDOMツリーから無くなります。

var randomItems = _.sampleSize($('li').get(), 2);
$('ul').empty().append(randomItems);

• 動作確認用codepen: https://codepen.io/jun68ykt/pen/KKVNJNO

上記では、lodash の_.sampleSize を使っています。

Comments

[okama]

コメントいただきありがとうございます、、！！

まさにcodepenで確認させていただいた動作が理想です！
ですが、試してみたのですがなぜ全く
動きませんでした。。
ランダムにも2個表示にもなりません・・
コピペして全く同じもの記載してみてもダメでした。。

const randomOrders = _.shuffle([...Array(n)].map((_e, i) => i));
に[uncaught ReferenceError: _ is not defined]

const items = $('li');
に[Parsing error: The keyword 'const' is reserved]
と出てしまうのですがここが何か関係しているでしょうか。。

jqueryは以下を読み込んでおります。
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

[jun68ykt]

コメントありがとうござます。

> const items = $('li');
> に[Parsing error: The keyword 'cost' is reserved]
> と出てしまう

のであれば

const items = $('li');

で、 "const" と書くべきところを "cost" と書いてしまっており、 n が抜けているかもしれませんが、いかがでしょう？

[jun68ykt]

すみません。上記のコメントは無視してください。

[okama]

すみません！
私のコメントミスで投稿し直しました！

[jun68ykt]

まず
> uncaught ReferenceError: _ is not defined

のほうのエラーですが、lodash を読み込んでいないのが原因と思われますので、

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

のすぐ下に、以下の行

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" type="text/javascript"></script>

を追加してみるといかがでしょうか？

[jun68ykt]

次に、

> Parsing error: The keyword 'const' is reserved

についてですが、const が使えない設定のようですので、とりあえず、回答に挙げたコードの中で使っている

const

を

var

に変えてみると、いかがでしょうか？

[okama]

あ、、、、すみません、、、><
それでした、、、、ありがとございます！！！できました！！

[jun68ykt]

どういたしまして????
> できました！！
とのことでよかったです。別案も追記しました。ご参考まで。

[okama]

何から何までとても助かりました！
まだ理解が及ばない箇所が多々あるので、教えていただいた内容で勉強させていただきます！
ありがとうございました！

[jun68ykt]

????