Возможно ли как то отсортировать теги по их аттрибутам с помощью js?

Question

[Алексей Гончаров]

Здравствуйте. Есть три таких тега:

<div memory="128-gb"></div>
<div memory="64-gb"></div>
<div memory="256-gb"></div>

Возможно ли отсортировать эти теги по атрибутам memory?
Для более полного обьяснения после сортировки должно стать так:

<div memory="64-gb"></div>
<div memory="128-gb"></div>
<div memory="256-gb"></div>

Теги переместились и от сортировались по возрастанию

Comments

[Иван Ерохин]

https://stackoverflow.com/questions/14160498/how-c...

[Алексей Гончаров]

Иван Ерохин, именно для моего html кода не работает(

[Сергей Сергей]

spoiler

именно для моего html кода не работает(

[Алексей Гончаров]

Сергей Сергей, кто это?

[zombtron]

Алексей Гончаров,

Возможно ли отсортировать эти теги по атрибутам memory?

Возможно, но т.к. атрибуты текстовые, то сортировать будет так:
128-gb
256-gb
64-gb
ибо 6 > 2 > 1.
Но, можно наколдовать.

[Алексей Гончаров]

zombtron, что только я не делал, использовал slice все равно не работало, и пробоал преобразовать в число

[Михаил Ушенин]

В чём именно сложность?

• как отсортировать элементы
  
• как отсортировать их по атрибутам
  
• как отсортировать их по атрибутам в нужном вам порядке
  

Хотя, если просто отвечать на ваш вопрос, то ответ: «да».

[Алексей Гончаров]

Михаил Ушенин,

var $wrapper = $('.testWrapper');

$wrapper.find('.test').sort(function(a, b) {
    return +$(a).data('percentage').slice(-3, 0) - +$(b).data('percentage').slice(-3, 0);
})
.appendTo($wrapper);

Вроде все верно, но этот код не работает. Если да то сделайте тогда?

[Михаил Ушенин]

Алексей Гончаров, почему вы считаете, что это верно?
$wrapper.find('.test')
В вашем примере нет элементов с классом test.

[Сергей Сергей]

spoiler

это популяризатор адаптации

[ ...document.querySelectorAll( 'div[memory]' ) ]
  .map( node => ( { node, mem: parseInt( node.attributes.memory.value ) } ) )
  .sort( ( a, b ) => a.mem - b.mem )
  .forEach( d => document.body.append( d.node ) )

[Алексей Гончаров]

Михаил Ушенин, ну естественно я все классы заменил я показываю как образец)

[Алексей Гончаров]

Сергей Сергей, хахаха популяризатор, вы сами уже как популяризотор

Answer 1

[Михаил Ушенин]

const container = document.querySelector('.container');
[...container.querySelectorAll('div[memory]')]
    .sort((a, b) => parseInt(a.getAttribute('memory'), 10) - parseInt(b.getAttribute('memory'), 10))
    .forEach(element => container.append(element));

Answer 2

[zombtron]

Ну, вот так где-то
(если с сортировкой строк. для int лень ковырять):

<div class="memory" memory="128-gb">128-gb</div>
	<div class="memory" memory="64-gb">64-gb</div>
	<div class="memory" memory="256-gb">256-gb</div>
<script>

unordered = {};
keys = Array();
divs = document.querySelectorAll('.memory');
for(i=0; i<divs.length; i++){
	keys[i] = divs[i].attributes.memory.nodeValue;
	unordered[divs[i].attributes.memory.nodeValue] = divs[i];
	parentCont = divs[i].parentNode;
	divs[i].remove();
}
keys = keys.sort();

for(i=0; i<keys.length; i++){
	parentCont.appendChild(unordered[keys[i]]);
}

</script>

Comments

[Алексей Гончаров]

Этот код отсортирует вот так?

64, 128, 256

Не как строку?

[zombtron]

Алексей Гончаров,
А проверка что показывает? )

[Сергей Сергей]

keys[i] = parseInt(divs[i].attributes.memory.nodeValue);

[Алексей Гончаров]

zombtron, https://codepen.io/asd123asd1/pen/OJgbVmr?editors=1010
Я скопировал твой код и он не работает

[zombtron]

Не работает, ибо не скопирован.
Скопирован это вот так: