如何创建一个项目的每首字母排序的字母组使用javascript

Question

我想创建一个目录列表看起来像这样一个目录列表：

用户可以添加项目，所以可以说，如果用户现在添加O-item-1，应该生成一个“O”的大写字母，并且该项目应该进入元素内部，如果更多的项目以相同的字母开始，它应该被添加到相同的O字母组。

我使用web服务来获取数据，它看起来像这样：

这一点，我将数据追加到容器：

<div class="Listitem-section-template"> 

</div> 

这是我的填充容器与数据瞬间：

<script id="Listitem-template" type="text/html"> 
<div class="Listitem-section-section"> 
     <div class="Listitem-section-title">A</div> <-- Hardcoded 
     <div class="Listitem-section-container"> 
      <div class="Listitem-section-item"> 
       <div class="Listitem-section-item-title"> 
        <a href="{{= Url}}" >{{= Title}}</a> 
       </div>   
      </div>  
     </div> 
    </div> 
    <div class="processlinks-line"></div> 
</script> 

这是get函数，我怎么用数据填充：

get: function(web) { 
      AST.Utils.JSON.get(_spPageContextInfo.webServerRelativeUrl+"/_vti_bin/AST/ListItem/ListitemService.svc/GetListItem", null, AST.Listitem.renderListitem); 
     }, 
renderListitem: function(data) { 
      $("#Listitem-template").tmpl(data["ListItemResults"]).prependTo(".ListItem-section-template"); 
    } 

，到目前为止，我已经做到了这一点：

<script type="text/javascript"> 
    var filter = new Array(); 
    filter["#"] = "09"; //for numbers 
    filter["A"] = "A"; 
    filter["B"] = "B"; 
    filter["C"] = "C"; 
    filter["D"] = "D"; 
    filter["E"] = "E"; 
    filter["F"] = "F"; 
    filter["G"] = "G"; 
    filter["H"] = "H"; 
    filter["I"] = "I"; 
    filter["J"] = "J"; 
    filter["K"] = "K"; 
    filter["L"] = "L"; 
    filter["M"] = "M"; 
    filter["N"] = "N"; 
    filter["O"] = "O"; 
    filter["P"] = "P"; 
    filter["Q"] = "Q"; 
    filter["R"] = "R"; 
    filter["S"] = "S"; 
    filter["T"] = "T"; 
    filter["U"] = "U"; 
    filter["V"] = "V"; 
    filter["W"] = "W"; 
    filter["X"] = "X"; 
    filter["Y"] = "Y"; 
    filter["Z"] = "Z"; 
    filter["Å"] = "AA"; 
    filter["Ä"] = "AE"; 
    filter["Ö"] = "OE"; 

    $(document).ready(function() { 
     ICC.ProcessDocumentLinks.get(); 

    }); 
</script> 

我在想用数组，并让它们隐藏创建所有选择这样的：里面如果

<div id="Listitem-section-section-#" class="Listitem-section hidden-section">..</div> 
<div id="Listitem-section-section-A" class="Listitem-section hidden-section">..</div> 
<div id="Listitem-section-section-B" class="Listitem-section hidden-section">..</div> 
<div id="Listitem-section-section-C" class="Listitem-section hidden-section">..</div> 
etc.. 

和填充项目第一个字母与选择器匹配，然后显示它？

任何人有任何提示或指导我如何才能顺利完成此任务？

任何形式的帮助表示赞赏！

Answer 1

试试这个！ http://jsbin.com/aMElAba/1/edit

<div class="letter-list"> 
</div> 

<button>Add new</button> 

<script> 

$('button').click(function() { 
    var title = prompt("Enter the name:"); 
    if (!title.length) return; 
    var letter = title.substr(0, 1).toLowerCase(); 

    var list = $('.letter-list'); 
    var section = list.children('[data-letter="'+letter+'"]'); 
    if (!section.length) { 
     var section = $('<div data-letter="'+letter+'"></div>'); 
     if (!list.children().length) { 
      list.append(section); 
     } else { 
      // find right element so list is sorted 
      section.insertAfter(list.children()[0]); 
     } 
    } 

    var item = $('<span>'+title+'</span>'); 
    if (!section.children().length) { 
     section.append(item); 
    } else { 
     // find right element so list is sorted 
     item.insertAfter(section.children()[0]); 
    } 

}); 

</script> 

<style> 
    .letter-list { 
     width:200px; 
     min-height:100px; 
     background:#eef; 
     margin:20px auto; 
     padding:10px; 
    } 
    [data-letter] { 
     background:#efe; 
     margin:7px; 
    } 
    [data-letter]:before { 
     content:attr(data-letter); 
     font-size:30px; 
     margin:7px; 
     float:left; 
    } 
    span { 
     display:block; 
    } 
</style>