Adding an input match-randomizer with JS / jQuery? (Edited)

Question

I am trying to make a basic randomizer that can match things. Sort of like a date(Romance) picker, but different situation.

I want the product to look like this:

(User Input A1)

(User Input A2)

(User Input A3)

(User Input B1)

(User Input B2)

(User Input B3)

Where an A input randomly matches a B input, but A never matches an A, and A doesn't randomize.

So it looks like this:

A1 - (B#)

A2 - (B#)

A3 - (B#)

Problem is, I suck at JS. I take some classes on Codecademy, being HTML / CSS / jQuery. I keep trying different things, but they keep failing. Can someone help me?

HTML:

<!DOCTYPE html>
<html>
<head>
<link class="jsbin"             href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">                </script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
</head>
<body>


<ul> People
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>  
</ul>
<hr />
<ul> Jobs
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>
  <li><input></input></li>  
</ul>
</body>
</html>

JS:

$(document).ready(function () {
    $('#jobs').find('li').shuffle();
    var mynewlist = '';
    $('#people').find('li').each(function (index) {
        var jb = $('#jobs').find('li').eq(index);
        mynewlist += '<li>Person:' +  $(this).text() + ' Job:' + jb.text() + '</li>';
    });
    $(mynewlist).appendTo('#newList');
});

http://jsbin.com/ijotok/1

This is what I have.

I want the inputs to randomize, but it doesn't work.

This is my first post. Sorry if it breaks the rules or anything, but I told my boss I'd get this done 2 weeks ago.

Please state what you have tried already (incl. code), it's required by the rules. — likeitlikeit, May 13 '13 at 19:05
What exactly isn't working? You've just copied the jsbin code from this question: http://stackoverflow.com/questions/8225582/randomize-a-unordered-list - what have you tried in addition to this? — Joe, May 13 '13 at 19:40
I am trying to change where things go. The numbers in the list are input fields. — NinjaStarz7, May 13 '13 at 19:59

score 0 · Answer 1 · edited May 13 '13 at 20:13

Your randomization methodology an array is not optimized and won't work ever.

See at my correction to resolve your mistake:

$(document).ready(function(){
  $('ul').each(function(){
        // get current ul
        var $ul = $(this);
        // get array of list items in current ul
        var $liArr = $ul.children('li');
        // get lenth of the array
        var arrLen = $liArr.length;
        // sort array of list items in current ul randomly
        var $newArr = [];
        do{
            // Generate a randomize int
            var rndNumber = parseInt(Math.random() * arrLen);       
            // Extract a element to add it into new Array
            $newArr.push($liArr.slice(rndNumber,1));
            // Remove the element from the array  
            $liArr.splice(rndNumber, 1);
            // Decrement the length array
            arrLen--;
        }
      while(arrLen >= 0);
      // Add new table
      $(this).append($newArr);        
  });
});

http://jsfiddle.net/DiGui/2taTa/1/

The randomization works fine. – NinjaStarz7 May 13 '13 at 19:59 — NinjaStarz7, May 13 '13 at 19:59

Mark Schultheiss · Accepted Answer · 2013-05-13T20:25:38.763

with this markup: NOTE: added ID's to the markup for easy use.

<ul id="people">People
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr />
<ul id="jobs">Jobs
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr />
<ul id='newList'>New List</ul>

this code:

jQuery.fn.shuffle = function () {
    var j;
    for (var i = 0; i < this.length; i++) {
        j = Math.floor(Math.random() * this.length);
        $(this[i]).before($(this[j]));
    }
    return this;
};
$(document).ready(function () {
    $('#jobs').find('li').shuffle();
    var mynewlist = '';
    $('#people').find('li').each(function (index) {
        var el = $('#people').find('li').eq(index);
        var jb = $('#jobs').find('li').eq(index);
        mynewlist += '<li>Person:' + el.text() + ' Job:' + jb.text() + '</li>';
    });
    $(mynewlist).appendTo('#newList');
});

Working example: http://jsfiddle.net/f8wk5/

EDIT: Slightly more compact version of the last part: the shuffle remains the same

$(document).ready(function () {
    $('#jobs').find('li').shuffle();
    var mynewlist = '';
    $('#people').find('li').each(function (index) {
        var jb = $('#jobs').find('li').eq(index);
        mynewlist += '<li>Person:' +  $(this).text() + ' Job:' + jb.text() + '</li>';
    });
    $(mynewlist).appendTo('#newList');
});

Thanks! But if I use this with an input instead of the numbers, how would that work? — NinjaStarz7, May 13 '13 at 20:48
inside a/the `li`? `$(this).find('input').val()`? not your original question though. — Mark Schultheiss, May 13 '13 at 20:50
I wanted any person to be able to use it without changing the code. — NinjaStarz7, May 13 '13 at 20:53

Adding an input match-randomizer with JS / jQuery? (Edited)

2 Answers2