jQuery:按顺序将 <li> 标签插入列表中

Question

我有一个订单 <li>标签:

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

一些<li>标签在任何给定时刻可能会或可能不会出现在列表中:

即

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

我希望能够说，插入 <li>按正确的顺序标记...

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

有时我的列表可能如下所示:

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

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

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

或者像这样:

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

基本上，列表可能会改变...但是每当我想插入<li>时标签(一次一个)它需要按照顺序数组的正确顺序放置。

Answer 1

我对这个问题的理解似乎与其他回答者不同(这是一个词吗？)。

我对这个问题的理解是，您想要将单个元素插入到已经存在未知数量的其他元素的页面中。您希望将此单个元素按照数组定义的顺序插入到列表中。

<小时/>

编辑:另一个可以具有更好性能的选项是在要插入的元素的顺序数组中查找索引。然后从该索引循环到末尾。一旦找到存在的元素，就将新元素插入到该元素之前。

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 可能不支持，因此可能必须用其他内容替换。