Javascript JS：循环字符串，找到第一个字母，作为字母组锚输出到相关字符串？

场景：我有按字母顺序从资源库输出到列表中的内容。我需要能够循环浏览此列表中的每个元素/项目（例如：部门名称），并将所有以“A”（“B”、“C”、“D”等）开头的元素/项目分组到其自己的类中，以进行锚导航。然后，我需要能够找到找到的字母，并创建组锚

所需输出：在页面顶部，找到的字母表中的每个字母都有与该字母对应的元素。单击该字母将锚定到一个节/div（新类），其中包含相应字母的所有元素

我尝试过的（找到第一个字母并创建一个组）：

    for(var i=0; i<input_1.length; i++){ //input_1 is the name of the specific resource library
   var firstChar = input_1[i].charAt(0)
   var newGroup = firstChar + "_input_1";
   if(typeof(window[newGroup]) == 'undefined') window[newGroup] = []; //if var doesn't exist, create it
   window[newGroup].push(input_1[i]);
}
A_input_1 = []; //A-letter-specific group

---

for（var i=0；i我想不出一个本机方法能比循环列表中的所有元素更优雅地实现这一点。因此，如果您有大量项目或在较慢的客户端浏览器上，性能可能会成为一个问题

考虑到上述情况，这里有一种方法：

var length = input_1.length;
var groups = {};

for ( var i = 0; i < length; i ++ )
{
    var item      = input_1[ i ];
    var firstChar = item.charAt( 0 );

    groups[ firstChar ] = groups[ firstChar ] || [];
    groups[ firstChar ].push( item );
}

您需要使用DOM函数来操作DOM。实际上，这是一种痛苦。老实说，我不会搞砸它；有一些库可以让事情变得更简单。让我们使用JQuery

假设您的页面具有以下HTML：

<ul id="TheList">
    <li>Auspicious</li>
    <li>Brobdingnagian</li>
    <li>Calico</li>
    <li>Doppleganger</li>
    <li>Etc.</li>
</ul>


吉祥的
布罗丁纳吉安
印花布
多普勒甘格
等等


用于操作它的JQuery代码看起来是这样的（我还没有测试这段代码以确保它正常工作）：

var-previousFirst=null；
$（'#TheList'）。每个（函数（）{
var text=$（this.text（）；
如果（previousFirst==null）previousFirst=$（此项）；
$（this）.addClass（text.charAt（0）+'\u input_1'）；
if（text.charAt（0）！=previousFirst.text（）.charAt（0））{
$（''）.prependTo（前一个）；
previousFirst=$（此）；
}
});

如果您不熟悉JQuery，我鼓励您在JQuery.com上阅读它。一旦您熟悉了库的工作，代码应该清晰易懂。也就是说，如果您需要任何澄清，请随时询问，我会尽我最大的努力。
关于排序，一种可能的方法是建立一个优先顺序数组组{}旁边的字符值。随后对该数组进行排序，然后将其值用作组{}中字符串数组的键。如果还需要对这些字符串进行排序，那么我不确定对每个小数组进行单独排序或对大输入_1[]进行排序是否会更快数组。结果甚至可能取决于单个JS执行引擎。请记住“for group in groups”，虽然，可能会按顺序返回结果，但JS没有为属性枚举指定任何顺序，因此您不能依赖它。啊-在我的回答中，我没有将问题理解为甚至没有意识到DOM是什么！在进行实际分组和/或排序时，我将其理解为一个样式/效率问题。重新阅读问题，我认为您可能更接近目标。考虑到Ryan和Andrew的建议（谢谢，伙计们），我能够将输出内容的内容与字母合并在一起：。我尝试添加一个返回lgi.anchor（lc），但对可链接输出无效。
<ul id="TheList">
    <li>Auspicious</li>
    <li>Brobdingnagian</li>
    <li>Calico</li>
    <li>Doppleganger</li>
    <li>Etc.</li>
</ul>

var previousFirst = null;
$('#TheList').each(function() {
    var text = $(this).text();
    if (previousFirst === null)  previousFirst = $(this);

    $(this).addClass(text.charAt(0) + '_input_1');

    if (text.charAt(0) != previousFirst.text().charAt(0))  {
        $('<a name="'+ previousFirst.text().charAt(0) +'"></a>').prependTo(previousFirst);
        previousFirst = $(this);
    }
});