Javascript-форум - Сортировка DIV на "чистом" JavaScript

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Сортировка DIV на "чистом" JavaScript (https://javascript.ru/forum/dom-window/58876-sortirovka-div-na-chistom-javascript.html)

Цитата:

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

Вот еще один пример древнего API:

:victory: спасибо не знал

Цитата:

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

спасибо не знал

Таких методов, на самом деле, куча.

Цитата:

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

если можно заюзать slice?

можно и так :)

Array.apply(null,c.querySelectorAll(".search-element"))

Цитата:

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

можно и так

В IE8 будет ругаться. В идеале, если забить на совместимость, лучше сделать так:

Array.from(c.querySelectorAll('.selector'));

Цитата:

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

Feuerman063,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<div id="search">
	<div class="search-element">
		<div><a href="..."><img src="..."></a></div>
		<div><a href="...">Вася</a></div>
	</div>
	<div class="search-element">
		<div><a href="..."><img src="..."></a></div>
		<div><a href="...">Аня</a></div>
	</div>
	<div class="search-element">
		<div><a href="..."><img src="..."></a></div>
		<div><a href="...">Вова</a></div>
	</div>
	<div class="search-element">
		<div><a href="..."><img src="..."></a></div>
		<div><a href="...">Боря</a></div>
	</div>
</div>
<script type='text/javascript'>
var c = document.querySelector("#search");
Array.apply(null,c.querySelectorAll(".search-element"))
.sort(function(a, b) {
    a = a.querySelector("div:last-child > a").text;
    b = b.querySelector("div:last-child > a").text;
    return a < b ? -1 : a > b ? 1 : 0
})
.forEach(function(a) {
    c.appendChild(a)
});
</script>
</body>

</html>

вариант на jQuery тут http://javascript.ru/forum/jquery/39...tml#post259543

Рони, доброго дня! А вот такой вопрос есть...а можно ли сделать так, чтоб сортировка происходила исходя из классов? Т.е. есть два класса ".negativ" и ".pozitiv". Можно ли сделать так, чтоб сначала вывелись все классы ".pozitiv", а лишь после этого все элементы с классом ".negativ"?

malefikus13,
да ... минимальный html сделайте

Цитата:

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

malefikus13,
да ... минимальный html сделайте

К примеру вот так. :) Сначала чтоб вывелись все class="pozitive", а следом class="negative"

<div id="block">
	<div class="negative">
		<div><b>Вася</b></div>
	</div>
	<div class="pozitive">
		<div><b>Аня</b></div>
	</div>
	<div class="pozitive">
		<div><b>Вова</b></div>
	</div>
	<div class="negative">
		<div><b>Боря</b></div>
	</div>
</div>

malefikus13,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .pozitive{
     background-color: #FF0000;
   }
   .negative{
     background-color: #008000;
   }
   .test{
     background-color: #D2691E;
   }
   a{
     color: #FFFF00;
   }

  </style>
</head>

<body>
<div id="block">
    <div class="test">
		<div><b>Пётр</b></div>
	</div>
	<div class="negative">
		<div><b>Вася</b></div>
	</div>
	<div class="pozitive">
		<div><b>Аня</b></div>
	</div>
	<div class="pozitive">
		<div><b>Вова</b></div>
	</div>
	<div class="negative">
		<div><b>Боря</b></div>
	</div>
</div>

<script type='text/javascript'>
var c = document.querySelector("#block");
Array.apply(null,document.querySelectorAll("#block > div"))
.sort(function(a, b) {
    a = a.classList;
    a = a.contains('pozitive') ? -1 : a.contains('negative') ? 0 : 1;
    b = b.classList;
    b = b.contains('pozitive') ? -1 : b.contains('negative') ? 0 : 1;
    return a < b ? -1 : a > b ? 1 : 0
})
.forEach(function(a) {
    c.appendChild(a)
});
</script>
</body>

</html>

рони, спасибо большое! :):thanks:

рони,
а не подскажите еще, для общего развития, что по этой теме следует почитать. Очень хочется поглубже данную тему усвоить. Заранее спасибо Вам!