html - Adding an input match-randomizer with JS / jQuery? (Edited) -
i trying make basic randomizer can match things. sort of date(romance) picker, different situation.
i want product this:
(user input a1)
(user input a2)
(user input a3)
(user input b1)
(user input b2)
(user input b3)
where input randomly matches b input, never matches a, , doesn't randomize.
so looks this:
a1 - (b#)
a2 - (b#)
a3 - (b#)
problem is, suck @ js. take classes on codecademy, being html / css / jquery. keep trying different things, keep failing. can 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'); }); this have.
i want inputs randomize, doesn't work.
this first post. sorry if breaks rules or anything, told boss i'd done 2 weeks ago.
with markup: note: added id's markup 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; (var = 0; < 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: more compact version of last part: shuffle remains 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'); });
Comments
Post a Comment