使用javascript按字母顺序列出列表，并带有字母标题。

Question

我有一个这样的列表:

<ul id="list">
    <li><a href="/">Adam</a></li>
    <li><a href="/">Alex</a></li>
    ...
    <li><a href="/">Zara</a></li>            
</ul>

这段JavaScript已经按照字母顺序排序:

var mylist = $('#list');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

现在我需要将列表设置成这样：

<ul id="list">
    <li id="a"><a name="a" class="title">A</a>
        <ul>
            <li><a href="/">Adam</a></li>
            <li><a href="/">Alex</a></li>
        </ul>
    </li>
    <li id="b"><a name="b" class="title">B</a>
        <ul>
            <li><a href="/">Barry</a></li>
            <li><a href="/">Becky</a></li>
        </ul>
    </li>
    ...
    ...
    ...
    <li id="z"><a name="z" class="title">z</a>
        <ul>
            <li><a href="/">zavv</a></li>
            <li><a href="/">zora</a></li>
        </ul>
    </li>
</ul>

要在这个苹果风格的滑块导航中使用列表。

你知道我该如何使用JavaScript实现吗？

- Amaca

Answer 1

我猜最容易的方法是首先将所有的li元素按其内容的首字母分类收集在一个对象中，然后分别对这些列表进行排序。由于代码胜过千言万语，这里是我会这样做的代码示例：

var list = { letters: [] };    //object to collect the li elements and a list of initial letters
$("#list").children("li").each(function(){
    var itmLetter = $(this).text().substring(0,1).toUpperCase();
    if (!(itmLetter in list)) {
        list[itmLetter] = [];
        list.letters.push(itmLetter);
    }
    list[itmLetter].push($(this));    //add li element to the letter's array in the list object
});

list.letters.sort();    //sort all available letters to iterate over them
$.each(list.letters, function(i, letter){
    list[letter].sort(function(a, b) {
        return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());    //sort li elements of one letter
    });
    var ul = $("<ul/>");    //create new dom element and add li elements
    $.each(list[letter], function(idx, itm){
        ul.append(itm);
    });
    $("#list").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));    //add the list to a new li and to #list ul
});

JSFiddle: http://jsfiddle.net/KnC6M/

- Aletheios

---

它像魔法一样运行！非常感谢你！你救了我；）为Aletheios竖起大拇指！只有一个问题：为什么要使用$("#list").empty()这行代码？ - Amaca

很高兴它对你有用。也许你可以接受我的答案...（上面的小复选框）;) $("#list").empty() 从<ul id="list">中删除原始的li元素，以便添加新生成的项目。 - Aletheios

好的，正如我所想。那行代码导致我的脚本出现了一个错误...列表元素内的链接无法工作（这是一个在自定义谷歌地图中更改位置而不重新加载页面的链接）。如果我删除那行代码，一切都能正常工作。你认为没有那行代码会造成问题吗？ - Amaca

只是猜测，可能与事件处理程序有关...但我刚刚注意到，即使没有那行代码，脚本也可以正常工作（不要问我为什么）-我已经在上面进行了更正。 - Aletheios

Answer 2

感谢 @Aletheios，我更新了您的解决方案，使用 css 使其更加高效，而不是通过 $("#list").empty(); 删除列表。

假设您的列表已经排序好了。

var letters = [];

$("#list").children("li").each(function(i){
    var itmLetter = $(this).text().trim().substring(0,1).toUpperCase();
    if (letters.indexOf(itmLetter)<0) {
        console.log(`${itmLetter} is not in ${letters} and index is ${i}`);
        $(`#list li:nth-child(${i+1})`).addClass("AddContent").attr('data-content',itmLetter);
        letters.push(itmLetter);
    } else {
        console.log(`${itmLetter} is in ${letters}`);
    }
});

CSS:

#list{
  margin-left: 15px;
}

li.AddContent:before {
   content: attr(data-content);
   margin-left: -15px;
   display: block;
}

HTML:

  <ul id="list">
      <li><a href="/">    Zara</a></li>
      <li><a href="/">    Adam</a></li>
      <li><a href="/">   Alex</a></li>            
      <li><a href="/">   Toby</a></li>
  </ul>

JSfiddle: http://jsfiddle.net/KnC6M/105/

- Bhargav Patel

Answer 3

我正在搜索类似的东西，我想以字母分组的方式对数组进行排序。这是我的代码，它是@Aletheios代码的修改版本。希望能有所帮助。

var list = { letters: [] };
var words = {let: ['abc', 'aabbgg', 'cda', 'hello', 'bca']};

$.each(words.let, function(){                
    var itLetter = this.substring(0,1).toUpperCase();
    if(!(itLetter in list)){
        list[itLetter] = [];                    
        list.letters.push(itLetter);
    }
    list[itLetter].push($(this));
});

list.letters.sort();
$.each(list.letters, function(i, letter){

    var ul = $("<ul/>");
    var li = $('<li/>');
    $.each(list[letter], function(idx, itm){
        ul.append('<li>'+ itm[0] +'</li>');
        console.log(itm);

    });
    $("body").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));
});

这是代码片段。 http://jsfiddle.net/checkomkar/x8taqcnk/

- Omkar Kamale