Dotaz: Javascript (jQuery) - zotriedenie div elementov podľa id

[Peter]

Dobrý deň vám prajem

Robím si websocket chat aplikáciu v ktorej v určitých prípadoch môže prísť jedna správa, ktorá bola odoslaná ako prvá neskôr ako druhá správa. Každá správa - teda vykreslený div má id v ktorom je timestamp odoslania, teda následovne po prijatí správy spúšťam triediaciu funkciu:

<div id="chat">
  <div id="1" class="conversation">text 1</div>
  <div id="2" class="conversation">text 2</div>
  <div id="3" class="conversation">text 3</div>
  <div id="6" class="conversation">text 6</div>
  <div id="7" class="conversation">text 7</div>
  <div id="4" class="conversation">text 4</div>
  <div id="8" class="conversation">text 8</div>
  <div id="9" class="conversation">text 9</div>
  <div id="5" class="conversation">text 5</div>
  <div id="stop" style="clear: both;"></div>
</div>

var main = $('#chat');
var elem = main.children('.conversation');
elem.sort(function(a, b) {
  var sort1 = parseInt(a.id);
  var sort2 = parseInt(b.id);
  return (sort1 < sort2) ? -1 : (sort1 > sort2) ? 1 : 0;
});
elem.detach().insertBefore($('#stop'));

Všetko funguje v poriadku až na to, že pri zotriedení sa hlavný div (chat) "prekreslí celý" čo síce v samotnom prehliadači nie je nejako vidieť (nejaké priblikávanie alebo niečo tomu podobné), ale problém nastáva, keď je medzi tými správami nejaké audio, alebo video, tak prehrávanie sa vtedy zastaví. Potreboval by som preto pomôcť s nejakou triediacou funkciou, ktorá bude "premiestňovať" v DOM-e len riadky, ktoré nesedia, alebo proste nejako ináč zabezpečiť aby sa prehrávanie médií nezastavilo.

Za akékoľvek nápady vám budem vďačný.

Odpovědi

[chrono]

Nepomôže CSS flexbox a order?

[Want]

Podle mě je to tím, že jQuery pracuje přímo s DOM modelem. Použij místo něj React, který pracuje s virtuálním DOM modelem.

[ttt]

A nemůžeš tu správu po přijetí zařadit na správné místo? Jestli tomu dobře rozumím, tak ji zařadíš nakonec a pak setřídíš celý chat. Opravdu, nebo mi něco uniká?