Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Разброс блоков в рандом порядке. (https://javascript.ru/forum/dom-window/24631-razbros-blokov-v-random-poryadke.html)

RazZzeR 08.01.2012 11:24
Разброс блоков в рандом порядке.
 
Вложений: 1
Всем привет, это снова я, с бесконемным числом вопросов :D

Сейчас вот что требуется:
Разбросать блоки в рандом порядке.

снова работаю над плейером...

например парент у нас id='music'
а каждый в нем tr - это трек.

http://javascript.ru/forum/attachmen...d=132600723 3


например иходный текст:
<table id='music'>
<tr id='1'>...</tr>
<tr id='2'>...</tr>
<tr id='3'>...</tr>
<tr id='4'>...</tr>
<tr id='5'>...</tr>
<tr id='6'>...</tr>
<tr id='7'>...</tr>
</table>

а что должно получится:



<table id='music'>
<tr id='2'>...</tr>
<tr id='5'>...</tr>
<tr id='7'>...</tr>
<tr id='1'>...</tr>
<tr id='3'>...</tr>
<tr id='4'>...</tr>
<tr id='6'>...</tr>
</table>

тоесть порядок рандомный.
и желательно чтобы innerHTML у этих tr не трогался, дабы не портить содержим

/////////////////////////////////////////

и еще вот попрос.
по этой же теме, но другой.
как получить рандомный блок, например для его редактирования,
если есть парент, например id='music' как выше.



///////// PS
сразу говорю - о гет запросе с построением в рандом порядке уже думал, не подходит.


Заранее благодарен за поддержку, благодарен не на словах

Aetae 08.01.2012 12:07 
<table id='music'>
 <tr id='1'><td>1</td></tr>
 <tr id='2'><td>2</td></tr>
 <tr id='3'><td>3</td></tr>
 <tr id='4'><td>4</td></tr>
 <tr id='5'><td>5</td></tr>
 <tr id='6'><td>6</td></tr>
 <tr id='7'><td>7</td></tr>
</table>
<script>
var table=document.getElementById('music'), tr=table.getElementsByTagName('tr'), i=tr.length;
table=tr[0].parentNode; //ибо tbody итп
while(i--) Math.random()<.5 ? table.appendChild(tr[i]) : table.insertBefore( tr[i], table.firstChild );
</script>

RazZzeR 08.01.2012 12:13
;) отлично, давай wmr кошелек

RazZzeR 08.01.2012 12:35
а что если усложнить задачу, и список постраивается у меня вот так:

<table id='music'>
<tr id='1'><td>1</td></tr>
<tr id='p1'><td>1</td></tr>
<tr id='2'><td>2</td></tr>
<tr id='p2'><td>2</td></tr>
<tr id='3'><td>3</td></tr>
<tr id='p3'><td>3</td></tr>
<tr id='4'><td>4</td></tr>
<tr id='p4'><td>4</td></tr>
<tr id='5'><td>5</td></tr>
<tr id='p5'><td>5</td></tr>
<tr id='6'><td>6</td></tr>
<tr id='p6'><td>6</td></tr>
<tr id='7'><td>7</td></tr>
<tr id='p7'><td>7</td></tr>
</table>


и список надо построить вот так:



<table id='music'>
<tr id='6'><td>6</td></tr>
<tr id='p6'><td>6</td></tr>
<tr id='4'><td>4</td></tr>
<tr id='p4'><td>4</td></tr>
<tr id='2'><td>2</td></tr>
<tr id='p2'><td>2</td></tr>
<tr id='3'><td>3</td></tr>
<tr id='p3'><td>3</td></tr>
<tr id='5'><td>5</td></tr>
<tr id='p5'><td>5</td></tr>
<tr id='7'><td>7</td></tr>
<tr id='p7'><td>7</td></tr>
<tr id='1'><td>1</td></tr>
<tr id='p1'><td>1</td></tr>
</table>

(в рандомном порядке, но рядом с ним должен быть блок p[число]

RazZzeR 08.01.2012 13:38
imposible?

Aetae 08.01.2012 14:01
Да нет, я просто на работе какбэ)
<table id='music'>
 <tr><td>1</td></tr>
 <tr><td>к1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>к2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>к3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>к4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>к5</td></tr>
 <tr><td>6</td></tr>
 <tr><td>к6</td></tr>
 <tr><td>7</td></tr>
 <tr><td>к7</td></tr>
</table>
<script>
(function(){
  var rand, table=document.getElementById('music'), tr=[].slice.call(table.getElementsByTagName('tr')), i=tr.length;
  table=tr[0].parentNode; //ибо tbody итп
  while(i--){
    if(i%2) rand = Math.random()<.5;
    table.insertBefore( tr[i], rand ? table.firstChild : i%2 ? null : table.lastChild )
  }
})()
</script>


R117571207359

RazZzeR 08.01.2012 14:06
очень благодарен. скидываю бонусик 300 вмр, надеюсь не мало :)
буду признателен если аську оставишь, у меня много работы есть для профи =3

RazZzeR 08.01.2012 14:12
эх, только всеравно рано или позно глюк происходит. наверно надо обнулять переменную. сейчас попробую

RazZzeR 08.01.2012 14:16
тоесть если функцию выполнять раз 5-6 то они не ровно стоят. тоесть например

1
к1

2
к3

RazZzeR 08.01.2012 14:17
аа, кстати как еще сделать чтобы абсолютно весь список рандомно перевернулся?

RazZzeR 08.01.2012 14:41
странно, уже такой ошибке в тесте выше нету, а вот у меня на сайте осталась)

Aetae 08.01.2012 15:30 
Клик.
<table id='music'>
 <tr><td>1</td></tr>
 <tr><td>к1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>к2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>к3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>к4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>к5</td></tr>
 <tr><td>6</td></tr>
 <tr><td>к6</td></tr>
 <tr><td>7</td></tr>
 <tr><td>к7</td></tr>
</table>
<script>
(function(){
  var table=document.getElementById('music'), tr=table.getElementsByTagName('tr'), i=tr.length;
  table=tr[0].parentNode; //ибо tbody итп
  randomize = function(){
    var arr=[].slice.call(tr), j=i, rand;
    while(j--){
      if(j%2) rand = Math.random()<.5;
      table.insertBefore( arr[j], rand ? tr[0] : j%2 ? null : tr[i-1] )
    }
  }
})()
window.onclick=randomize;
</script>

Попробуй так, если не поможет нужен код.

Aetae 08.01.2012 15:33
Цитата:
Сообщение от RazZzeR (Сообщение 148861)
аа, кстати как еще сделать чтобы абсолютно весь список рандомно перевернулся?
Т.е. ?
Как в первом варианте?)

рони 08.01.2012 16:19
RazZzeR,
Вариант для всех браузеров ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
Клик.
<table id='music'>
 <tr><td>1</td></tr>
 <tr><td>к1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>к2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>к3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>к4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>к5</td></tr>
 <tr><td>6</td></tr>
 <tr><td>к6</td></tr>
 <tr><td>7</td></tr>
 <tr><td>к7</td></tr>
</table>
<script>
function randomize() {
    for (var b = document.getElementById("music"), a = b.rows, c = a.length, b = a[0].parentNode; 2 < c--;)c % 2 && (0.5 > Math.random() ? (b.appendChild(a[c - 1]), b.appendChild(a[c - 1])) :
    (b.insertBefore(a[c], a[0]), b.insertBefore(a[c], a[0])))
};
window.document.onclick=randomize;
</script>
</body>
</html>

RazZzeR 08.01.2012 18:41
угу, тут все работает, у меня на странице выходит в перемешку.
1й раз - все идеально.
2й раз уже как захочет.

может типа переменные какие то надо обнулить и построить список с нуля при вызове функции?

RazZzeR 08.01.2012 18:42
или если реально готов помочь - скину адрес на сайт =)

RazZzeR 08.01.2012 18:44
хотя вы и так уже помогли, просто именно у меня чето не так :D

Aetae 08.01.2012 18:48
Лучше скинь готовый кусок html с сайта сюда.

RazZzeR 08.01.2012 18:50
ну, впринципе разбить рендом 1 раз хватит =)

братюни, спасибо :yes:

RazZzeR 08.01.2012 18:50
хорошо, сейчас скину

RazZzeR 08.01.2012 18:52
когда ты сказал скинуть я начал копировать, и увидел - <tr id="0"></tr>.
это фикс от бага плейера :-E

вобщем из за этого блока было нечетное число - а потом и все криво.

спасибо огроменное :D

RazZzeR 08.01.2012 18:52
убрал его и все работает четко :)

RazZzeR 08.01.2012 18:56
Вложений: 1
аа, ксттати есть такой косяк в браузерах, когда кликаешь 2 или 3 раза на одно и тоже место - выделяется текст рядом. вот как выходит у меня

http://javascript.ru/forum/attachmen...d=132603455 3



:( бесит

RazZzeR 13.01.2012 16:28
кстати придумал как усовершенствовать...
нужно tr с id="play"+переменная[NOWplaying] и tr корорый рядом с ним(снизу от него, это тулбар типа громкость, время, и т.д.) помещались в самый верх, а потом все остальные разбросались в рандомном порядке.

Aetae, если сделаешь, еще денежку кину,
это ко всем относится =)

Aetae 13.01.2012 17:57 
<html>
<body>
Клик.
<table id='music'>
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr id="play"><td>play</td></tr>
 <tr><td>кplay</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>6</td></tr>
 <tr><td>7</td></tr>
 <tr><td>8</td></tr>
 <tr><td>9</td></tr>
 <tr><td>10</td></tr>
 <tr><td>11</td></tr>
 <tr><td>12</td></tr>
</table>

<script>
window.onclick = function(){
   var d = document,
   table = d.getElementById('music'),
   fragment = d.createDocumentFragment(),
   tr = table.rows,
   arr = [], i , j;
   
   table=tr[0].parentNode; //ибо tbody итп
   
   i=d.getElementById('play').rowIndex;
  
   fragment.appendChild(tr[i]);
   fragment.appendChild(tr[i]);
   
   i=j=tr.length;
   
   if('v'=='\v') while(i--) arr.push(tr[i]); //ie<9
   else arr=arr.slice.call(tr);

   table.insertBefore( fragment, tr[0] )
  
   return function(){
     i=j;
     arr.sort(function(){return .5-Math.random()})  
     while(i--) table.appendChild( arr[i] )
   }
 }();
</script>

</body>
</html>


Если я правильно понял. Вообще подгонять скрипт под вёрстку нехорошо. Надо работать сразу над тем и над другим, только тогда будет и красиво и быстро.

RazZzeR 15.01.2012 13:50
все верно, но у меня мнов все наперекосяк =)

вобщем вверх подняло тр с заданным id.
перемешала порядка 5 треков, и все.
повторно выполнять функцию не удается.

они отсортировались по tr id
и прилежащий к нему рядом блок.

значит мы друг друга не поняли))

вот как устроена таблица у нас:

<table id='music'>
 <tr id="play2"><td>1</td></tr>
 <tr><td>1k</td></tr>
 <tr id="play2"><td>play</td></tr>
 <tr><td>2k</td></tr>
 <tr id="play3"><td>3</td></tr>
 <tr><td>3k</td></tr>
....
</table>


нам надо чтобы tr getElementById('play'+NOWplaying)
поднималась вверх, а остальные разбрасывались в раномном порядке.
тоесть типа разбрасывать все блоки с прилежащими к ним, кроме
getElementById('play'+NOWplaying)

NOWplaying - переменная не должна задаваться функцией, это у нас в скрипте id текушего трека (который вопроизводится)

Aetae 15.01.2012 15:02 
<html>
<body>
Клик.
<table id='music'>
 <tr id="play1"><td>1</td></tr>
 <tr><td>1k</td></tr>
 <tr id="play2"><td>play</td></tr>
 <tr><td>play2k</td></tr>
 <tr id="play3"><td>3</td></tr>
 <tr><td>3k</td></tr>
 <tr id="play4"><td>4</td></tr>
 <tr><td>4k</td></tr>
 <tr id="play5"><td>5</td></tr>
 <tr><td>5k</td></tr>
</table>

<script>
NOWplaying=2;

window.onclick = function(){
   var table = document.getElementById('music'),
   tr = table.rows,
   i=tr.length, j=i/2,
   arr = [];
   
   table=tr[0].parentNode; //ибо tbody итп
   
   while(i--) arr.push([tr[i],tr[--i]]);

   return function(){
   
     i=j; arr.sort(function(){return .5-Math.random()});
    
     while(i--) {
       if(arr[i][1].id==='play'+NOWplaying){
         table.insertBefore( arr[i][0], tr[0] );
         table.insertBefore( arr[i][1], tr[0] );
       }else{
         table.appendChild( arr[i][1] );
         table.appendChild( arr[i][0] );
       }
     }
   }
 }();
</script>

</body>
</html>


Ток количество tr должно быть четным иначе плохо будет.))

RazZzeR 16.01.2012 15:04
тоесть? в какой строке его задавать?

i=j; arr.sort(function(){return .5-Math.random()});


??

Aetae 16.01.2012 16:30
Не надо ничего задавать.)
Хорошо:
<tr></tr>
<tr></tr>
Плохо:
<tr></tr>
<tr></tr>
<tr></tr>


В принципе у вас так и есть, просто малоли лишняя tr попадётся и всё поломает.)

Кстати, взглянув нетрезвым взглядом, упростил:
<html>
<body>
Клик.
<table id='music'>
 <tr id="play1"><td>1</td></tr>
 <tr><td>1k</td></tr>
 <tr id="play2"><td>play</td></tr>
 <tr><td>play2k</td></tr>
 <tr id="play3"><td>3</td></tr>
 <tr><td>3k</td></tr>
 <tr id="play4"><td>4</td></tr>
 <tr><td>4k</td></tr>
 <tr id="play5"><td>5</td></tr>
 <tr><td>5k</td></tr>
</table>

<script>
NOWplaying=2;

window.onclick = function(){
   var table = document.getElementById('music'),
   tr = table.rows,
   i=tr.length, j=i/2,
   arr = [];
   
   table=tr[0].parentNode; //ибо tbody итп
   
   while(i--) arr.push([tr[i],tr[--i]]);

   return function(){
   
     i=j; arr.sort(function(){return .5-Math.random()});
    
     while(i--) if(arr[i][1].id!=='play'+NOWplaying){
       table.appendChild( arr[i][1] );
       table.appendChild( arr[i][0] );
     }
   }
 }();
</script>

</body>
</html>

RazZzeR 17.01.2012 19:25
хмм, поставил, ни ошибок, ни раскидывания.... ищю в этом связь...

нашел. переменная table и tr уже используется... исправляю.

RazZzeR 17.01.2012 19:28
попробовал так, неполучилось =)

var tablei = document.getElementById('musiс'),
   tri = tablei.rows,
   i=tri.length, j=i/2,
   arr = [];
    
   tablei=tri[0].parentNode; //ибо tbody итп
    
   while(i--) arr.push([tri[i],tri[--i]]);
 
   return function(){
    
     i=j; arr.sort(function(){return .5-Math.random()});
     
     while(i--) if(arr[i][1].id!=='play'+NOWplaying){
       tablei.appendChild( arr[i][1] );
       tablei.appendChild( arr[i][0] );
     }
   }


ааа, переменная "i" тоже используется, причем обновляется приблизительно каждую миллисекунду

RazZzeR 17.01.2012 19:35
сделал так:

function inzrb() {
// старая, рабочая, недоработанная версия
//for (var b = $(scnpp), a = b.rows, c = a.length, b = a[0].parentNode; scnt < c--;)
//c % scnt && (sppen > Math.random() ? (b.appendChild(a[c - 1]), b.appendChild(a[c - 1])) :
//(b.insertBefore(a[c], a[0]), b.insertBefore(a[c], a[0])));

var tablei = document.getElementById('music'),
   tri = tablei.rows,
   ind=tri.length, j=ind/2,
   arr = [];
     
   tablei=tri[0].parentNode; //ибо tbody итп
     
   while(ind--) arr.push([tri[ind],tri[--ind]]);
  
   return function(){
     
     ind=j; arr.sort(function(){return .5-Math.random()});
      
     while(ind--) if(arr[ind][1].id!=='play'+NOWplaying){
       tablei.appendChild( arr[ind][1] );
       tablei.appendChild( arr[ind][0] );
     }
   }

}


в итоге мертвая тишина. ошибок нет, но и прогресса нет

RazZzeR 17.01.2012 19:38
хмм, давай в асе или еще гденить договоримся, и об оплате заодно


Часовой пояс GMT +3, время: 14:15.