How can I insert new list items sorted by attribute value?

user_1779902 0
Viewed 22

Let's imagine we have an HTML message list. Each item has index - Unix timestamp with milliseconds.

<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>

Then we have to insert another item, with ts=1657744950123. It should be after Item 3.

Is there an efficient way to calculate the new position in the list so that jQuery can insert the new element (because it requires a reference element relative to which will be inserted after or before the new element), given that there can be a lot of messages on the page and we don't have possibility to walk through all of them every time, making comparisons?

jquery javascript
2 Answers

Assuming no existing data structure representing the list, I'd loop over the list elements, checking the attribute value, until I found the first larger value. That's the index + 1 at which you'll insert.

If there is a data array, you could do something similar on the array itself and regenerate the list.

Here's a wild 'n woolly example of the former approach. If you need the text nodes to also be updated, you probably want to take approach #2 and rebuild the list programmatically.

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>

user_12648040

Consider the following jQuery example.

$(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>

This assumes the list is already sorted. If not, you can append the new item anyplace, detach all the items, sort them, and append them back.

$(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>

See more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

user_4633190
Related