javascript - JS : loop through strings, 找到第一个字母，输出为关联字符串的字母组 anchor ？

Question

场景:我有按字母顺序输出到资源库列表中的内容。我需要能够遍历此列表中的每个元素/项目(例如:部门名称)，并将所有以“A”(“B”、“C”、“D”等)开头的元素分组到它自己的类中用于 anchor 导航。然后，我需要能够找到找到了哪些字母并创建组 anchor 。

期望的输出: 在页面的顶部，找到了字母表中的每个字母，其中包含该字母的元素。单击字母将锚定到包含相应字母的所有元素的部分/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

在创建从该组到关联字符串的 anchor 时，我很激动。想法？

Answer 1

您需要使用 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').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);
    }
});

如果您不熟悉 JQuery，我鼓励您在 jquery.com 上阅读它。熟悉库的工作原理后，代码应该清晰易懂。也就是说，如果您需要任何说明，请随时提出，我会尽力而为。