JQuery: insert <li> tag in list in order

Question

I have a tag order <li>:

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

Some of the tags <li>may or may not be listed at any time:

i.e.

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

I would say insert a tag <li>into it in the correct 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 may 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 may change ... but whenever I want to insert a tag <li>(one at a time), it needs to be placed in the right order as an array of orders.

Answer 1

My understanding of the question seems different than other defendants (is that a word?).

, , . , , .

---

EDIT: , , - , . . , , .

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}));
    }
}

, , , , .

---

, . , , .

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

Array.indexOf - IE, - .

Answer 2

, :

var ul = document.getElementsByTagName('ul')[0],
    lis = ul.getElementsByTagName('li'),
    order = ["a-link", "b-link", "c-link", "d-link", "e-link", "f-link"],
    toInsert = "b-link",
    i = $.inArray( toInsert, order ),
    el = lis[ toInsert ],
    new_li;

if( !el && i > -1 ) {
    do el = lis[ order[ ++i ] ];
    while( i < order.length && !el )

    (new_li = document.createElement('li')).id = new_li.innerHTML = toInsert;

    if( el ) ul.insertBefore( new_li, el );
    else ul.appendChild( new_li );
}

"" , .

JSFIDDLE DEMO

---

:

:

var order = ["a-link", "b-link", "c-link", "d-link", "e-link", "f-link"],
    i = 0,
    place = $('ul'),
    el = $('#' + order[i] );

if( !el.length ) {

    $('<li>',{id:order[i]}).prependTo( place );

} else {

    do {
        ++i;
        place = el;
        el = $('#' + order[i] );
    } while( el.length )

    if( i < order.length ) {
        $('<li>',{id:order[i]}).insertAfter( place );
    }
}

JSFIDDLE DEMO

---

:

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

$.each( order, function(i,v) {
    prev = el;
    el = $('#' + v);
    if( !el.length ) {
        if( !i ) {
            $('<li>',{id:order[i],text:order[i]}).appendTo('ul');
        } else {
            $('<li>',{id:order[i],text:order[i]}).insertAfter( prev );
        }
        return false;
    }
});

JSFIDDLE DEMO