Question

Assuming I have a collection with a bunch of well ordered elements, what’s the common method to insert another new child at it’s abstract order-position?

Using a dom library $(new).eq($(new).data('orderPosition')); doesn’t work, because it’s not a valid index.

// Add this element to it's logic position in the collection:
<div data-order-position="10"></div>

// The collection
<div id="myCollection">
   <div data-order-position="4"></div>
   <div data-order-position="67"></div>
   <div data-order-position="81"></div>
   <div data-order-position="82"></div>
   <div data-order-position="761"></div>
</div>

My real collection contains about ~400 elements.

Answer 1

I think that working with an array of integers is probably the most efficient method. You can maintain a constant list of the sorted elements in an array somewhere (and even continue to sort as needed):

//Array of positions
var positions = [];

//Initially set up the array in question
//divs are already sorted, as we know
$("#myCollection div").each(function () {
   positions.push(parseInt(this.dataset.orderPosition)); 
});

//Create the new node we want to insert (in your case it may already exist)
var $new = $("<div>").data('order-position', 10).text(10);

//Append the new node index (if node already exists, just use `.data` as above)
positions.push(10);

//Yes, for whatever reason JS sorts by string and not number by default.
//There may also be a more efficient way to add the integer in the correct spot
//without having to sort all over again, but this is fast enough
positions.sort(function (a, b) {
    return a - b;
});

//Insert the new node!
$("#myCollection div").eq(positions.indexOf(10) - 1).after($new);

http://jsfiddle.net/ExplosionPIlls/ULEFX/