jQuery: insert a <li> tag into a list in order

Question

I have an order of <li> tags:

var order = ["a-link", "b-link", "c-link", "d-link", "e-link", "f-link"];

Some of the <li> tags might or might not be on the list at any given moment:

i.e.

<ul>
<li id="a-link"></li>
<li id="d-link"></li>
</ul>

I would like to be able to say, insert a <li> tag in it's right order...

    <ul>
        <li id="a-link"></li> 
<!-- i'd like to insert <li id="b-link"> right after this -->
        <li id="d-link"></li>
    </ul>

Sometimes my list might look like this:

    <ul>
    <li id="b-link"></li>

<!-- but maybe I want to insert a <li id="d-link"> here-->

    <li id="e-link"></li>
    </ul>

Or like this:

    <ul>
    <li id="a-link"></li>
    <li id="d-link"></li>
<!-- but maybe I want to insert a <li id="e-link"> here-->
    <li id="f-link"></li>
    </ul>

Basically, the list might change...but whenever I want to insert a <li> tag (one at a time) it needs to be placed in the right order as the order array.

Answer 1

My understanding of the question appears to be different than the other answerers (is that a word?).

My understanding of the question is that you want to insert a single element into a page where an unknown number of the other elements already exists. You want this single element to be inserted into the list in the order defined by your array.

---

EDIT: Another option which could have better performance would be to find the index in the order array of the element you wish to insert. Then loop from that index to the end. As soon as you find an element which exists, insert your new element before that one.

http://jsfiddle.net/bWPX8/5/

var order = ["a-link", "b-link", "c-link", "d-link", "e-link", "f-link"];        

var toInsert = "c-link";
var insertIndex = order.indexOf(toInsert);

if($("ul>li").length === 0){

    $("ul").append(  $("<li>",{id:toInsert}));

}else if($("#"+toInsert).length===0){
    var inserted = false;

    for(var i = insertIndex + 1, len = order.length; i<len; i++){
        var $el = $("#" + order[i]);

        if($el.length > 0){
            $el.before($("<li>",{id:toInsert}));
            inserted = true;
            break;
        }
    }

    if(!inserted){
         // should be last
          $("ul").append($("<li>",{id:toInsert}));
    }
}

For even better performance, determine whether the index of your element is before or after the midway point of the array and either loop forward or backwards depending on which would be less iterations of the loop.

---

If that is the question, here is a brute-force way to do it. If the list is considerably larger than the example given the performance may not be great.

http://jsfiddle.net/bWPX8/3/

Array.indexOf may not be supported by some version of IE, so this may have to be replaced with something else.