從隨機子項中對列表項進行排序

Question

更新：由於很多人認為問題不夠清楚，我將嘗試更好地解釋它^_^ 感謝您的幫助和耐心！

我有一個大約 15 個項目的清單（會增加或減少）。 每個項目都包含一個帶有指向其網站的 URL 的徽標。 這些項目按字母順序手動排序。

  <ul class="myClass">
        <li class="item">
          <a href="URL" title="Company A" target="_blank">
            <span class="logo">
              <img src="images/logo1.jpg">
            </span>
          </a>
        </li>
        <li class="item">
          <a href="URL" title="Company B" target="_blank">
            <span class="logo">
              <img src="images/logo2.jpg">
            </span>
          </a>
        </li>
        <li class="item">
          <a href="URL" title="Company C" target="_blank">
            <span class="logo">
              <img src="images/logo3.jpg">
            </span>
          </a>
        </li>
        <li class="item">
          <a href="URL"  title="Company D" target="_blank">
            <span class="logo">
              <img src="images/logo4.jpg">
            </span>
          </a>
        </li>
        <li class="item">
          <a href="URL" title="Company E" target="_blank">
            <span class="logo">
              <img src="images/logo5.jpg">
            </span>
          </a>
        </li>
    ...
    </ul>

每次加載頁面時（也是第一次），我想隨機選擇一個孩子，然后顯示從選定的孩子開始重新排序的列表，然后是其余的，而不會丟失字母順序。

例如，如果 ramdon 選擇我列表的第三個子項，那么它應該顯示如下列表：

<ul class="myClass">
    <li class="item">
      <a href="URL" title="Company C" target="_blank">
        <span class="logo">
          <img src="images/logo3.jpg">
        </span>
      </a>
    </li>
    <li class="item">
      <a href="URL" title="Company D" target="_blank">
        <span class="logo">
          <img src="images/logo4.jpg">
        </span>
      </a>
    </li>
    <li class="item">
      <a href="URL" title="Company E" target="_blank">
        <span class="logo">
          <img src="images/logo5.jpg">
        </span>
      </a>
    </li>

    ...

    <li class="item">
      <a href="URL"  title="Company A" target="_blank">
        <span class="logo">
          <img src="images/logo1.jpg">
        </span>
      </a>
    </li>
    <li class="item">
      <a href="URL" title="Company B" target="_blank">
        <span class="logo">
          <img src="images/logo2.jpg">
        </span>
      </a>
    </li>
</ul>

更新2：嗨！ 這是我試圖讓它工作的代碼，但它什么也沒做:( ramdom 工作，但我如何重新排序列表項？？

    function randomizeChild(){
      var listItems = [];

      $('ul.retailers li').each( function() {
          listItems.push(this);   
      });

      var randomChild = Math.floor(Math.random() * listItems.length);
      var newOrder = listItems.splice(listItems.indexOf(randomChild)).concat(listItems);

      console.log("Random Child --->" + randomChild);

  }

  randomizeChild();

我希望這次我的問題更清楚。 非常感謝！ :)

Answer 1

嘗試給你的 ul 一個 id

<ul id='sorted_list'>

然后在javascript中你可以這樣做：

elementlist = ['A', 'B']
randomelement = Math.floor(Math.random() * elementlist.length)

list = document.getElementById('sorted_list')
listelement = document.createElement('LI')
listelement.textContent(elementlist[randomelement])
list.appentChild(listelement)

將此與 zvonas 的答案結合起來，您應該對其進行管理。

Answer 2

幫助您入門：

var elems = ['A','B','C','D','E','F'];
var selectedLetter = 'D';
var newOrder = elems.splice(elems.indexOf(selectedLetter)).concat(elems);