从随机子项中对列表项进行排序

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);