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