标题列表 - 分组和创建首字母

Question

我有一个按字母顺序排列的标题列表。

<div class="list">    
  <div><a href="http://www.example.com/id-1333">Alien</a></div>
  <div><a href="...">Argo</a></div>
  <div><a href="...">Art</a></div>
  <div><a href="...">Ban</a></div>
  <div><a href="...">Bruin</a></div>
  ...
</div>

首先，我需要为以相同字母开头的标题创建div容器，如下所示：

<div class="list>
  <div class="group">
    <div><a href="...">Alien</a></div>
    <div><a href="...">Argo</a></div>
    <div><a href="...">Art</a></div>
  </div>
  <div class="group">
    <div><a href="...">Ban</a></div>
    <div><a href="...">Bruin</a></div>
  </div>
  ...
</div>

其次，我需要为每个文字组创建首字母，如下所示：

<div class="list">
  <div class="group">
    <div class="initial">A</div>
    <div><a href="...">Alien</a></div>
    <div><a href="...">Argo</a></div>
    <div><a href="...">Art</a></div>
  </div>
  <div class="group">
    <div class="initial">B</div>
    <div><a href="...">Ban</a></div>
    <div><a href="...">Bruin</a></div>
  </div>
  ...
</div>

我需要一个动态转换列表的jQuery脚本。解决方案需要包含一个场景，在<a>标签中会有一些属性。

Answer 1

尝试下面的代码，这里我假设您的结果将显示在包含类resultList的div中

    var text = [];
    var object = {};
    $("div.list div a").each(function(i, ele){
        text.push($(this).text());
    });
    text.sort();
    $.map(text, function(val, i){
        var index = val[0].toUpperCase();
        if(object.hasOwnProperty(index)){
            object[index].push(val);
        }else{
            object[index] = [];
            object[index].push(val);
        }
    });
    for(var key in object){
        var html = '<div class="group"><div class="initial">'+key+'</div>';
        $(object[key]).each(function(i, ele){
            html += '<div><a>'+ele+'</a></div>';
        });
        html += '</div>';
        $("div.resultList").append(html);
    }

Answer 2

这个脚本可以完成这项工作。它很灵活，意思是：通过移动元素来工作。它最终只有一个具有相同类名（转换）的div列表。

// main container class name: "list"

function removeDuplicateCharacters(string) {
    return string
        .split('')
        .filter(function(item, pos, self) {
            return self.indexOf(item) == pos;
        })
        .join('');
}

var initialsList = "";

$("main").append("<div class='test'></div>");
$("main").append("<div class='list-new'></div>");

$( ".list > .title > a" ).each( function(){
    initialsList += $(this).text().charAt(0);
});

var numberOfTitles = initialsList.length;
initialsList = removeDuplicateCharacters(initialsList)

for (var i=0; i<initialsList.length; i++) {
    $(".list-new").append("<div class='group'><div class='initial'>" + initialsList.charAt(i) + "</div></div>")
    $(".list > .title > a").each( function(){
        if ( initialsList.charAt(i) == $(this).text().charAt(0) ) {
            $(".group:last").append($(this).parent());
        }
    });
}

$(".list").remove();
$(".list-new").toggleClass("list-new list");