如何将数组转换为以字母为标题的 <ul><li> 字母列表答案

【问题标题】：How to convert Array to <ul><li> Alphabetical List with Letters as Headings如何将数组转换为以字母为标题的 <ul><li> 字母列表
【发布时间】：2015-03-19 01:59:51
【问题描述】：

我有一个数组 ["Apple", "Orange", "Pineapple"]

如何将其转换为以下列表。

<ul>

<li id = "header">A</li>
<li id = "list" >Apple</li>

<li id = "header">O</li>
<li id = "list" >Orange</li>

<li id = "header">P</li>
<li id = "list" >Pineapple</li>

</ul>

【问题讨论】：

YOU 是如何解决这个问题的？向我们展示我们可以添加或更正的内容......请......
我尝试了这个接受的答案，它显示一个错误，我在 Javascript 中不太擅长。 stackoverflow.com/questions/16188556/… 错误：未捕获的语法错误：意外的令牌 ==
你必须学会在某个时候为自己解决这些简单的挑战。为什么不现在开始？要么这样，要么雇人。
是的，我试过了。会努力提高我的 JS 知识。
目前为止的演示会很有帮助。

标签： javascript jquery intel-xdk appframework

【解决方案1】：

var array = ["Apple", "Another-fruit", "Orange", "Pineapple"];

function createList() {
    var list = document.createElement("ul");
    var listItem;
    var currentLetter = '';

    for (var i = 0, length = array.length; i < length; i++) {
        var item = array[i];
        var firstLetter = item.charAt(0);

        if (currentLetter != firstLetter) {
            currentLetter = firstLetter;

            listItem = document.createElement("li");
            listItem.innerHTML = firstLetter;

            list.appendChild(listItem);
        }

        listItem = document.createElement("li");
        listItem.innerHTML = item;

        list.appendChild(listItem);
    }

    return list;
}

document.body.appendChild(createList());

http://jsfiddle.net/bvaughn/edyLg9ga/4/

【讨论】：

请注意，.innerText 在 Firefox 中不起作用。请改用.textContent。 jsfiddle.net/edyLg9ga/3
这个答案效果很好，但由于代码较短，我接受了上述答案。谢谢。
顺便说一句，上面的答案更短，因为它不起作用。如果列表中出现多个具有相同字母的单词，则会添加多个标题。重新考虑你的选择。 ;)

【解决方案2】：

这是您可以做到的方式之一，希望对您有所帮助

var arr = ["Apple", "Orange", "Pineapple"];
var $el = '<ul>';
$.each(arr, function(i, v) {
  $el += '<li id = "header">' + v.slice(0, 1) + '</li>';
  $el += '<li id = "list" >' + v + '</li>';
});
$el += '<ul>';
$('body').append($el);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

太棒了，它有效。唯一的问题是当数组有多个以同一个字母开头的项目时。 O - 橙色 1 - O - 橙色 2。取而代之的是 O - Orange1 - Orange
然后勾选符合您查询的答案
如果可能，请添加上述功能。谢谢。