javascript - Sort list items from random child

Question

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!

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>

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.

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>

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! :)

Answer 1

try giving your ul an id

<ul id='sorted_list'>

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)

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