如何使用jQuery按顺序添加列表项?

时间:2009-05-19 13:22:59

标签: jquery list html-lists

有没有人知道如何将项目添加到列表中但是这样做是因为它是按字母顺序使用jQuery排序的? 我有以下代码,只是将一个项目从下拉列表添加到列表的末尾:

$("#projectList").append(
    "<li>"
    + $("#Projects :selected").text()
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>"
    + "</li>"
);

但我希望能够将其插入适当的位置,而不是仅仅附加到现有列表的末尾。

非常感谢任何帮助! 谢谢!

4 个答案:

答案 0 :(得分:7)

我认为这样可行:

var new = $(
    "<li>"
    + $("#Projects :selected").text()
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>"
    + "</li>"
);

var firstafteritem = $("#projectList").children().filter( function () {
    return ($(this).text() > $("#Projects :selected").text())
} ).eq(0);

if (firstafteritem.length > 0) firstafteritem.before(new);
else                           $("#projectList").append(new);

firstafteritem的值将是您添加的文本值之后的第一个列表项。 (如果它是最后一个,则为无。)然后if / else将在该项之前或列表末尾插入。

(当然,这是假设您的列表的值已经按顺序排列。)

答案 1 :(得分:1)

<script type="text/javascript">
     $(document).ready(function(){
     $("#doctype li:first").before("<li><a href='intranet/library'>All documents</a></li>");
     });
</script>

答案 2 :(得分:0)

我认为至少在核心jQuery方面没有一种简单的方法。

如果你的名单很短(因为它的O(N))

,我可能会在未经测试的情况下做到这一点。
var liArr=$("#projectList li").get();
var newText=$("#Projects :selected").text();
var newEle=$("<li>"
    + newText
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>"
    + "</li>");
for(var li=0; li<liArr.length; li++) {
  if(newText<liArr[li].innerHTML) {
     $("#projectList").get(0).insertBefore(newEle,liArr[li]);
     newEle=null;
     break;
     } 
  }
if(newEle) { $("#projectList").append(newEle); }

答案 3 :(得分:0)

您可以解析列表以查看应添加项目的位置,然后使用after()jquery函数将项目添加到位。