existe - obtener id de un elemento javascript
JavaScript para ordenar elementos DOM por algún comparador, sin jQuery (3)
Debe usar las capacidades de ordenamiento de flexboxes. Esto permitirá reordenar los elementos sin moverlos en el DOM. Esto implica establecer la propiedad de order CSS.
Consulte https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes para obtener más detalles.
Imagina algunos elementos DOM:
<ul id="list">
<li data-index="3">Baz</li>
<li data-index="1">Foo</li>
<li data-index="2">Bar</li>
</ul>
¿Cómo se pueden ordenar estos elementos usando JavaScript y sin jQuery?
Algo similar a:
document.getElementById(''list'').sort(function(li) { return li.dataset.index; });
Hace algún tiempo escribí esto:
function sortChildren(wrap, f, isNum) {
var l = wrap.children.length,
arr = new Array(l);
for(var i=0; i<l; ++i)
arr[i] = [f(wrap.children[i]), wrap.children[i]];
arr.sort(isNum
? function(a,b){ return a[0]-b[0]; }
: function(a,b){ return a[0]<b[0] ? -1 : a[0]>b[0] ? 1 : 0; }
);
var par = wrap.parentNode,
ref = wrap.nextSibling;
par.removeChild(wrap);
for(var i=0; i<l; ++i) wrap.appendChild(arr[i][1]);
par.insertBefore(wrap, ref);
}
Básicamente:
Primero cree una matriz para almacenar los elementos con su valor correspondiente devuelto por la función de comparación.
También podríamos ejecutar la función al ordenar, pero como las interacciones DOM son lentas, de esta manera nos aseguramos de que la función solo se ejecute una vez por elemento.
Luego, lo ordenamos usando
sortnativo.Si
isNumargumento es verdad, usamos una función de clasificación que se compara numéricamente. Esto es necesario si la función del comparador devuelve cadenas pero desea comparar numéricamente en lugar de lexicográficamente.Ahora, eliminamos el elemento contenedor del DOM. De esta forma, reordenar a los niños será menos costoso (por ejemplo, evitando reembolsos).
Finalmente, reordenamos a los niños e insertamos el envoltorio nuevamente en su lugar.
Ejecútelo como
sortChildren(
document.getElementById(''list''),
function(li) { return li.dataset.index; },
true
);
o
sortChildren(
document.getElementById(''list''),
function(li) { return +li.dataset.index; }
);
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>sort list</title>
</head>
<body>
<strong>Double click the list to sort by data-index</strong>
<ul id= "list">
<li data-index= "3">Baz</li>
<li data-index= "1">Foo</li>
<li data-index= "2">Bar</li>
</ul>
<script>
document.body.ondblclick=function(){
var A=[], pa= document.getElementById(''list'');
var itemz= pa.getElementsByTagName(''li'');
A.slice.call(itemz).sort(function(a, b){
return a.getAttribute(''data-index'')-b.getAttribute(''data-index'');
}).forEach(function(next){
pa.appendChild(next);
});
}
</script>
</body>
</html>