ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript/jQuery сортировка элементов DOM
4 сообщений из 4, страница 1 из 1
JavaScript/jQuery сортировка элементов DOM
    #38887832
poiuytrewq
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
poiuytrewq
Участник
Доброй ночи, коллеги,

столкнулся с задачей сортировки группы элементов DOM для отображения в две или три колонки в зависимости от ширины окна браузера пользователя. В проекте используется Bootstrap. Вот такой простенький HTML отобразит данные в две или три колонки в зависимости от ширины окна браузера (у всех вложенных div-ов есть CSS свойство {float: left}).

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="list">
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>



Задача отсортировать элементы так, чтобы "на выходе" вывод в три колонки выглядел так

Код: html
1.
2.
3.
4.
5.
1	6	11
2	7	12
3	8	13
4	9	
5	10



Ну, и в две соответственно так

Код: html
1.
2.
3.
4.
5.
6.
7.
1	8
2	9
3	10
4	11
5	12
6	13
7



Задача для меня оказалась непосильной, прошу помощи у гуру. Пока что у меня получилось следющее:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
function sortList()
{
	var data = $("#list > div");

	// Сначала сортируем элементы по порядку
	// по аттрибуту 'data-count'

	data.sort(function (a, b)
	{
		a = parseInt($(a).attr('data-count'), 10);
		b = parseInt($(b).attr('data-count'), 10);

		if(a > b)
		{
			return 1;
		}
		else if(a < b)
		{
			return -1;
		}
		else
		{
			return 0;
		}
	});

	var result = {};
	var cols = 3; // К-во колонок
	var rows = Math.ceil($(data).size()/cols);
	var prev;
	var i = 0;

	for(var row = 1; row <= rows; row++)
	{
		for(var col = 1; col <= cols; col++)
		{
			var index = (col == 1) ? row : row + (rows * (col - 1));
			index--;

			if(index in data)
			{
				result[i] = data[index];
				i++;
			}
			else
			{
				// Здесь нужно как-то добавить пустой
				// элемент <div class="col-xs-6 col-lg-4"></div>
				// но как ?????????
				// $(result[i-1]).after('<div class="col-xs-6 col-lg-4">-</div>'); НЕ РАБОТАЕТ

			}
		}
	}

	$('#list').html(result);
}



Не знаю, насколько данный код оптимален, но он работает, за исключением того, что я не придумал как добавить новый элемент пустышку
...
Рейтинг: 0 / 0
24.02.2015, 23:47
| Ответить | Цитировать | Написать  
JavaScript/jQuery сортировка элементов DOM
    #38888032
уточнить
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
уточнить
Гость
poiuytrewq,

я правильно понял, что из этого блока
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="list">
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>

надо получить такую структуру?
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="list">
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>


А CSS-стили сами расставят нужное число колонок.
...
Рейтинг: 0 / 0
25.02.2015, 10:08
| Ответить | Цитировать | Написать  
JavaScript/jQuery сортировка элементов DOM
    #38888776
poiuytrewq
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
poiuytrewq
Участник
CSS делают колонки, но каждый элемент имеет свойство flost: left, т.е. каждый следующий прикрепляется к элементу слева от него, поэтому, порядок должен быть соответствующий
...
Рейтинг: 0 / 0
25.02.2015, 17:35
| Ответить | Цитировать | Написать  
JavaScript/jQuery сортировка элементов DOM
    #38889825
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
poiuytrewqЗадача отсортировать элементы так, чтобы "на выходе" вывод в три колонки выглядел так
Код: sql
1.
2.
3.
4.
5.
1	6	11
2	7	12
3	8	13
4	9	
5	10

Ну, и в две соответственно так
Код: sql
1.
2.
3.
4.
5.
6.
7.
1	8
2	9
3	10
4	11
5	12
6	13
7


 
Так?   (специально сделал data-count с шагом НЕ равным 1)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Сортировка элементов DOM</title>
<style>
.col-xs-6{
	border:1px solid #ccc;
	margin:10px;
	width:400px;
	height:50px;
	float:left;
}
</style>
</head>

<body>
<div id="list">
	<div data-count="70" class="col-xs-6 col-lg-4">070</div>
	<div data-count="80" class="col-xs-6 col-lg-4">080</div>
	<div data-count="90" class="col-xs-6 col-lg-4">090</div>
	<div data-count="100" class="col-xs-6 col-lg-4">100</div>
	<div data-count="110" class="col-xs-6 col-lg-4">110</div>
	<div data-count="120" class="col-xs-6 col-lg-4">120</div>
	<div data-count="10" class="col-xs-6 col-lg-4">010</div>
	<div data-count="20" class="col-xs-6 col-lg-4">020</div>
	<div data-count="30" class="col-xs-6 col-lg-4">030</div>
	<div data-count="40" class="col-xs-6 col-lg-4">040</div>
	<div data-count="50" class="col-xs-6 col-lg-4">050</div>
	<div data-count="60" class="col-xs-6 col-lg-4">060</div>
	<div data-count="130" class="col-xs-6 col-lg-4">130</div>
</div>

<script>
SetColumns();
window.onresize = function() {SetColumns();}

function SetColumns() {
	var lst = document.getElementById('list');

	for (i=0; i<lst.children.length; i++) { // Удаляем лишние DIV
		var el = lst.children[i];
		if (el.getAttribute('data-count') > 1000000) {lst.removeChild(el); i--;}
	}

	el = lst.children[0];
	var compStyle = getComputedStyle(el,'');
	var cols = lst.offsetWidth/(el.offsetWidth + parseInt(compStyle.marginLeft,10) + parseInt(compStyle.marginRight,10)) ^0; // ^0 - это отбросить дробную часть

	var rows = lst.children.length/cols ^0 + 1; // ^0 - это отбросить дробную часть

	var data = [].slice.call(document.querySelectorAll('#list > div'), 0); // получаем массив
	while (data.length < rows*cols) {
		var d = document.createElement('div');
		d.className = 'col-xs-6 col-lg-4';
		d.setAttribute('data-count', (data.length+1) * 1000000);
		d.style.border = '1px solid transparent';
		//d.innerHTML = 'New ' + (data.length+1) * 1000000; // Для отладки
		data.push(d);
		lst.appendChild(d);
	}

	data.sort(function(a,b) {
		a = parseInt(a.getAttribute('data-count'),10);
		b = parseInt(b.getAttribute('data-count'),10);
		return a-b;
		}
	);

	lst.innerHTML = '';

	var k = 1;
	for (i=1; i<=rows; i++) {
		for (j=1; j<=cols; j++) {
			if (j==1) {k = i;} else {k = k + rows;}
			lst.appendChild(data[k-1]);
		}
	}
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
26.02.2015, 17:23
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript/jQuery сортировка элементов DOM
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=78&tid=1446231]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 172ms
get topic data:
 11ms
get forum data:
 4ms
get page messages:
 38ms
get tp. blocked users:
 1ms
others: 236ms
total:  492ms
созд. / загр.: 492ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]