Javascript-форум - Упорядочить элементы

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Упорядочить элементы (https://javascript.ru/forum/jquery/35584-uporyadochit-ehlementy.html)

nule	15.02.2013 12:33

Упорядочить элементы

Здравствуйте!
Есть список дивов с id="a" и "b". Они идут в произвольном порядке. Как их разместить, чтобы сначала шли дивы id="a", за ними id="b"
Спасибо!

tsigel

15.02.2013 12:59

Чтобы переставить элемент относительно другого элемента можно использовать .insertBefore() и .insertAfter() jQuery

Я бы сделал массив с алфавитом, брал id, сравнивал первую букву с элементом массива... Короче в итоге вы получаете чуть более расширенную задачу чем сортировка массива.

Deff	15.02.2013 14:01

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class=WRP>
   <div id=d>id=d</div>
   <div id=b>id=b</div>
   <div id=c>id=c</div>
   <div id=a>id=a</div>

</div>

<script>
var divs =$('div[id]');
var arr=[];

for (var i=0;i<divs.length;i++) {
      arr.push(divs.eq(i).attr('id'));
}

arr = arr.sort();
for (var i=0;i<arr.length;i++) {
 $('#'+arr[i]).appendTo('.WRP');
}
</script>

рони	15.02.2013 14:52

Вариант ...

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class=WRP>
   <div id=d>id=d</div>
   <div id=b>id=b</div>
   <div id=c>id=c</div>
   <div id=a>id=a</div>

</div>
<script>
var divs =$('.WRP div');
var arr = jQuery.makeArray(divs).sort(function f(a,b)
{
  var c = 0
  if (a.id > b.id ) c = 1;
  if (a.id < b.id ) c = -1;
  return c
});
$(arr).appendTo('.WRP')
</script>
</body>
</html>

рони	15.02.2013 15:01

Вариант для ненормально одинаковых id

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class=WRP>
   <div id=a>id=a</div>
   <div id=a>id=a</div>
   <div id=b>id=b</div>
   <div id=b>id=b</div>

</div>
<script>
var divs_a =$('.WRP div[id="a"]');
var divs_b =$('.WRP div[id="b"]');
divs_a.each(function(indx, element){
  $(element).appendTo('.WRP');
  divs_b.eq(indx).appendTo('.WRP')
});
</script>
</body>
</html>

ksa	15.02.2013 15:05

Цитата:

Сообщение от nule

Как их разместить, чтобы сначала шли дивы id="a", за ними id="b"

Предложу такой вариант...

<script type="text/javascript">
function sort() {
	var ob=document.getElementById('box');
	var move,oa,i;
	do {
		oa=ob.getElementsByTagName('div');
		move=false;
		for (i=1; i<oa.length; i++) {
			if (oa[i-1].id>oa[i].id) {
				ob.insertBefore(oa[i],oa[i-1]);
				move=true;
			};
		};
	} while (move)
}
</script>
<div id='box'>
   <div id='d'>id=d</div>
   <div id='b'>id=b</div>
   <div id='c'>id=c</div>
   <div id='a'>id=a</div>
</div>
<button onclick='sort()'>Sort</div>

nule	15.02.2013 16:19

Цитата:

Сообщение от рони (Сообщение 234370)

Вариант для ненормально одинаковых id

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class=WRP>
   <div id=a>id=a</div>
   <div id=a>id=a</div>
   <div id=b>id=b</div>
   <div id=b>id=b</div>

</div>
<script>
var divs_a =$('.WRP div[id="a"]');
var divs_b =$('.WRP div[id="b"]');
divs_a.each(function(indx, element){
  $(element).appendTo('.WRP');
  divs_b.eq(indx).appendTo('.WRP')
});
</script>
</body>
</html>

Виноват, пожалуй неточно сформулировал задачу. Плюс еще забыл про уникальность id.
Дивы с классами всего двух типов, a и b. Изначальное количество и порядок следования произвольны. Пересортировать, чтобы сначала шли только а, потом только b.
Код в цитате для случая b b a дал результат b a b :(
Спасибо!

рони	15.02.2013 16:22

nule,

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class=WRP>
   <div id=b>id=b</div>
   <div id=b>id=b</div>
   <div id=a>id=a</div>

</div>
<script>
var divs =$('.WRP div');
var arr = jQuery.makeArray(divs).sort(function f(a,b)
{
  var c = 0
  if (a.id > b.id ) c = 1;
  if (a.id < b.id ) c = -1;
  return c
});
$(arr).appendTo('.WRP')
</script>
</body>
</html>

рони	15.02.2013 16:26

nule,
или так

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class=WRP>
   <div id=a>id=a</div>
   <div id=b>id=b</div>
   <div id=b>id=b</div>
   <div id=a>id=a</div>

</div>
<script>
var divs_a =$('.WRP div[id="a"]');
var divs_b =$('.WRP div[id="b"]');
  divs_a.appendTo('.WRP');
  divs_b.appendTo('.WRP')
</script>
</body>
</html>

nule	15.02.2013 16:51

Цитата:

Сообщение от рони (Сообщение 234426)

nule,
или так

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class=WRP>
   <div id=a>id=a</div>
   <div id=b>id=b</div>
   <div id=b>id=b</div>
   <div id=a>id=a</div>

</div>
<script>
var divs_a =$('.WRP div[id="a"]');
var divs_b =$('.WRP div[id="b"]');
  divs_a.appendTo('.WRP');
  divs_b.appendTo('.WRP')
</script>
</body>
</html>

Этот вариант работает, спасибо!

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