jQuery：插入a<；李>；按顺序标记到列表中

我有一个

标签的订单：

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

某些

标记在任何给定时刻都可能在列表中，也可能不在列表中：

i、 e

我想说的是，按正确的顺序插入一个

标记

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

或者像这样：

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

基本上，列表可能会更改…但每当我想插入一个

标记（一次一个）时，它需要以正确的顺序作为顺序数组放置。

要为相关更新信息添加解决方案：

var ul=document.getElementsByTagName（'ul'）[0]，
lis=ul.getElementsByTagName（'li'），
订单=[“a-link”、“b-link”、“c-link”、“d-link”、“e-link”、“f-link”]，
toInsert=“b-link”，
i=$.inArray（toInsert，订单），
el=lis[toInsert]，
新力,；
如果（！el&&i>-1）{
do el=lis[订单[++i]]；
而（i

这利用了“活动”列表，以及列表中的元素可以通过使用其ID作为列表属性来访问这一事实

---

原始答案：

这应该做到：

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

var顺序=[“a-link”、“b-link”、“c-link”、“d-link”、“e-link”、“f-link”]，
i=0，
地点=$（'ul'），
el=$（“#”+订单[i]）；
如果（！el.length）{
$（“
”，{id:order[i]}）.prependTo（place）；
}否则{
做{
++一,；
地点=el；
el=$（“#”+订单[i]）；
}while（el.length）
如果（i”，{id:order[i]}）；
}
}

---

下面是另一种方法：

var顺序=[“a-link”、“b-link”、“c-link”、“d-link”、“e-link”、“f-link”]，
前，
el；
$。每个（顺序、功能（i、v）{
prev=el；
el=$（'#'+v）；
如果（！el.length）{
如果（！i）{
$（“
”，{id:order[i]，text:order[i]}）；
}否则{
$（“
”，{id:order[i]，text:order[i]}）；
}
返回false；
}
});

---

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

---

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

---

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

var顺序=[“a-link”、“b-link”、“c-link”、“d-link”、“e-link”、“f-link”]；
var toInsert=“c-link”；
var insertIndex=订单indexOf（toInsert）；
如果（$（（“ul>li”）。长度===0）{
$（“ul”）.append（$（“
”，{id:toInsert}））；
}else if（$（“#”+toInsert）.length==0）{
插入的var=false；
对于（变量i=插入索引+1，len=order.length；i 0）{
$el.before（$（“
”，{id:toInsert}））；
插入=真；
打破
}
}
如果（！插入）{
//应该是最后一个
$（“ul”）.append（$（“
”，{id:toInsert}））；
}
}

为了获得更好的性能，请确定元素的索引是在数组的中间点之前还是之后，并根据循环的迭代次数较少的情况向前或向后循环

---

如果这是一个问题，这里有一个暴力的方式来做到这一点。如果列表比给定的示例大得多，则性能可能不太好

---

Array.indexOf

可能不受某些IE版本的支持，因此可能必须用其他内容替换它。

顺序中只有少数（12个以下）元素，因此我认为提供的解决方案效果良好。但是很高兴知道其他的优化，所以感谢您提供这些信息。“与其他答案不同”我是这里唯一的其他答案，但是我们的解决方案表现相同。你指的是别人的回答吗？（我还看不到被删除的。）@RightSaidFred有多个被删除的答案。你的，我没有机会完全检查。@JamesMontagne:好的。谢谢你的信息。我想我记得见过一个人，但我从来没有真正看过。除了

I=0

，我似乎失败了@JamesMontagne:我不知道你的意思<代码>i是分析的起点，因此它永远不应该被更改。哦，那么OP想确定要插入的代码吗？这个问题听起来像是自然顺序中的下一个问题。我猜不会。你必须为我澄清一些事情，你可能想在你的问题中澄清一下，以供将来的读者阅读。您是说要插入订单中缺少的第一个，还是说要手动选择要插入的，并将其放在正确的位置？你给出的例子可以用任何一种方式来解释。我补充了一些其他的例子，谢谢。

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

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