Javascript for 循环遍历数组列出名称和开头字母

Question

我想循环遍历一个数组并显示每个条目的名称，如果它是字母的第一个条目，则将第一个字母显示为分组。

期望的结果

<h1>A</h1>
        <ul>
            <li>Alligator</li>
            <li>Ant</li>
        </ul>
    <h1>B</h1>
        <ul>
            <li>Bat</li>
            <li>Bear</li>
        </ul>
    <h1>K</h1>
        <ul>
            <li>Kanagroo</li>
        </ul>

var children = ['Kangaroo', 'Alligator', 'Ardvark', 'Ant', 'Bear', 'Bat', 'Cat', 'Cow'];
            

            children.sort();

            var aZ = [];

            for (i=0; i < children.length; i++) {
              var child = children[i];
              
              aZ.push({
                name: child
              });
     
            }

            for (i=0; i < aZ.length; i++) {
              var child = aZ[i];  
              var cName = child.name; 
              var cLetter = cName.charAt(0); 
                
                document.write('<li>' + cLetter +'</li>'); 
                document.write('<li>' + cName +'</li>');    
            }

你知道我做错了什么或者我应该如何实现这个目标吗？

Answer 1

不知道为什么你要把它放入另一个结构中，似乎没有必要。

var children = ['Kangaroo', 'Alligator', 'Ardvark', 'Ant', 'Bear', 'Bat', 'Cat', 'Cow'];
children.sort();

var char = '';
var output = "";
for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var cLetter = child.charAt(0);
    if (cLetter !== char) {
        if (output.length) output += '</ul>';
        output += '<h1>' + cLetter + '</h1><ul>';
        char = cLetter;
    }
    output += '<li>' + child + '</li>';
}
if (output.length) output += '</ul>';
document.write(output);