Imaginemos que tenemos una lista de mensajes HTML. Cada elemento tiene un índice de marca de tiempo Unix con milisegundos .
<ul> <li ts="1657744925386">Item 1</li> <li ts="1657744941061">Item 2</li> <li ts="1657744953364">Item 3</li> <li ts="1657744964372">Item 4</li> <li ts="1657744973219">Item 5</li> <li ts="1657744978450">Item 6</li> </ul>Luego tenemos que insertar otro elemento, con ts= 1657744950123 . Debe estar después del artículo 3.
¿Hay alguna manera eficiente de calcular la nueva posición en la lista para que jQuery pueda insertar el nuevo elemento (porque requiere un elemento de referencia relativo al cual se insertará después o antes del nuevo elemento), dado que puede haber muchos mensajes en la página y no tenemos la posibilidad de revisarlos todos cada vez, haciendo comparaciones?
Suponiendo que no exista una estructura de datos que represente la lista, recorrería los elementos de la lista, verificando el valor del atributo, hasta que encontrara el primer valor más grande. Ese es el índice + 1 en el que insertará.
Si hay una matriz de datos, puede hacer algo similar en la propia matriz y regenerar la lista.
Aquí hay un ejemplo salvaje y lanoso del enfoque anterior. Si necesita que los nodos de texto también se actualicen, probablemente desee adoptar el enfoque n. ° 2 y reconstruir la lista mediante programación.
const list = document.querySelector('ul'); const items = list.querySelectorAll('li'); const newItemVal = 1657744950123; let itemAfterIndex; for (const [index, item] of items.entries()) { const tsVal = parseInt(item.getAttribute('ts')); if (tsVal > newItemVal) { itemAfterIndex = index; break; } } const newItem = document.createElement('li'); newItem.setAttribute('ts', newItemVal); newItem.textContent = 'New item'; const itemAfter = list.querySelectorAll('li')[itemAfterIndex]; list.insertBefore(newItem, itemAfter); <ul> <li ts="1657744925386">Item 1</li> <li ts="1657744941061">Item 2</li> <li ts="1657744953364">Item 3</li> <li ts="1657744964372">Item 4</li> <li ts="1657744973219">Item 5</li> <li ts="1657744978450">Item 6</li> </ul>Considere el siguiente ejemplo de jQuery.
$(function() { var myNewItem = $("<li>", { ts: 1657744950123 }).html("Item 7"); $("ul li").each(function(i, el) { console.log($(el).attr("ts"), myNewItem.attr("ts")); if ($(el).attr("ts") > myNewItem.attr("ts")) { myNewItem.insertBefore(el); return false; } }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li ts="1657744925386">Item 1</li> <li ts="1657744941061">Item 2</li> <li ts="1657744953364">Item 3</li> <li ts="1657744964372">Item 4</li> <li ts="1657744973219">Item 5</li> <li ts="1657744978450">Item 6</li> </ul>Esto supone que la lista ya está ordenada. De lo contrario, puede agregar el nuevo elemento en cualquier lugar, separar todos los elementos, ordenarlos y volver a agregarlos.
$(function() { $("<li>", { ts: 1657744950123 }).html("Item 7").appendTo("ul"); var myItems = $("ul li").detach(); myItems.sort(function(a, b) { if ($(a).attr("ts") < $(b).attr("ts")) { return -1; } if ($(a).attr("ts") > $(b).attr("ts")) { return 1; } if ($(a).attr("ts") == $(b).attr("ts")) { return 0; } }); $("ul").append(myItems); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li ts="1657744925386">Item 1</li> <li ts="1657744941061">Item 2</li> <li ts="1657744953364">Item 3</li> <li ts="1657744964372">Item 4</li> <li ts="1657744973219">Item 5</li> <li ts="1657744978450">Item 6</li> </ul>Ver más: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort