Reorganizar / ordenar DIV sin volver a insertar en DOM
Tengo varios DIV con contenido que tienen un atributo de peso de datos que se actualiza regularmente a través de AJAX.
Los ordeno en el bucle donde itero sobre los nuevos valores que vienen de la solicitud ajax.
Debido a que el peso de los datos se puede actualizar en cualquier momento a cualquier valor, el orden puede cambiar totalmente de una actualización a otra.
Mi lógica de clasificación parece defectuosa (por decir lo menos;)) porque solo compara cada elemento con su siguiente vía.next() así que tienes que hacer clic en "Ordenar por peso de datos" max. 4 veces para 4 elementos hasta que estén ordenados (ver el violín a continuación)
Es importante saber que los DIV que deben ordenarse contienen recursos externos como imágenes, videos, etc., por lo que es importante que se muevan y no se vuelvan a crear, porque creo que cuando se reinsertan en el DOM, los recursos contenidos se vuelven a cargar lo cual es inaceptable para mi caso de uso.
Como es difícil de describir y quizás entender, aquí está mi violín:
Actualizar
Mientras que el problema principal está resuelto, sigue existiendo el problema de que, cuando f.e. Se incluyen Youtube-Videos, se vuelven a cargar cada vez que se reordenan los DIV, incluso si el video no cambia de lugar en el DOM. Que a) se ve raro yb) interrumpe la reproducción de video. Leer más sobre el tema, mover iframes en el DOM siempre parece hacer que vuelvan a cargar su contenido. ¿Qué tan estúpido es eso?
Fiddle se actualiza con un peso de datos fijo de 1 para el video YT, por lo que siempre permanece en la parte superior.
Ideas muy bienvenidas !!