从随机孩子中排序列表项目 [英] Sort list items from random child

问题描述

更新：
正如很多人提到的那个问题还不够明确我会尝试更好地解释一下^ _ ^感谢您的帮助和耐心！

UPDATE: As many people refer that the question was not enough clear I'm going to try to explain it better ^_^ thanks for your help and patience!

我有一个大约15个项目的列表（会增加或减少）。每个项目都包含一个带有其网站URL的徽标。

I have a list of around 15 items (that will increase or decrease). Each item consist of a logo with the URL to their website. The items were manually alphabetically ordered.

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

每次页面加载（也是第一次）我想ramdonly选择一个孩子然后显示从所选子项开始重新排序的列表，然后是其余部分，而不会丢失按字母顺序排列。

Everytime the page is load (also the first time) I would like to ramdonly chose one child and then display the list reordered starting from the selected child followed by the rest without losing the alphabetically order.

例如，如果ramdon选择第3个我的列表的子项然后它应该显示如下列表：

For example, if the ramdon selects the 3rd child of my list then it should display a list like this:

<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的作品，但我怎么可以重新排序列表项目？

UPDATE 2: Hi! This is the code I'm trying to make it work but it does nothing :( The ramdom works, but how can I reorder the list items??

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

我希望这次我的问题更清楚。非常感谢提前！！）

I hope this time my question is clearer. Thanks a lot in advance! :)

推荐答案

尝试给你的ul一个id

try giving your ul an id

<ul id='sorted_list'>

然后在javascript中可以这样做：

then in javascript you can do:

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的答案，您应该管理它。

combine this with zvonas answer, and you should manage it.

这篇关于从随机孩子中排序列表项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！