javascript - JQuery 按字段排序列表并添加到分隔符 div

Question

我正在尝试通过一个名为 letter 的字段来组织列表。

所以字段是：

身份证，姓名，字母。

例如：

身份证姓名字母

1 清单 1 2 清单 2 3 清单 3 乙

在 id="a" 之后添加 list1 和 list2，在 id="b" 之后添加 list3

这是一个 json 数据示例：

{"id":[{"id":"1","name":"list1","letter":"a"},{"id":"2","name":"list2","letter":"b"}]}

下面的代码将内容添加到列表视图，但我需要更进一步，然后添加到他们自己的位置。

例如，所有带有字母“a”的列表都添加在 A 等之后

这是代码：

$.getJSON("list.json", function(data){
    var output = '';

    $.each(data.id, function(index, value){

        output += '<li><h1>' + value.name + '</h1></li>';

    });


    $('#listview').html(output).listview('refresh');

    }).error(function(args) {
console.log(args);

});

<ul id="listview">
<li id="a">A</li>
<!--Listings with letter A go here-->
<li id="b">B</li>
<!--Listings with letter B go here-->
<li id="c">C</li>
<!--Listings with letter C go here-->
</ul>

如何将列表添加到其位置？

Answer 1

$.each(data.id, function(index, value){ 

    $('<li><h1>' + value.name + '</h1></li>').insertAfter('#' + value.letter);

}); 

Answer 2

​var startstring = value.name.substring(0,1);

var outputA,outputB,outputC;
$.each(data.id, function(index, value){
    var startstring = value.name.substring(0,1);
    if(startstring == 'A'){

        outputA += '<li><h1>' + value.name + '</h1></li>';
    }
    if(startstring == 'B')
        outputB += '<li><h1>' + value.name + '</h1></li>';
    if(startstring == 'C')
        outputC += '<li><h1>' + value.name + '</h1></li>';


    });
$('#listview').append(outputA);
$('#listview').append(outputB);
$('#listview').append(outputC);