Javascript 选择第一个字母并将其置于内容组上方

我有一个类似这样的列表：

<ul class="mylist">
    <li>AAA</li>
    <li>AAA</li>
    <li>AAA</li>
    <li>BBB</li>
    <li>BBB</li>
    <li>CCC</li>
</ul>

AAA
AAA
AAA
BBB
BBB
CCC

我现在想在内容组上方添加内容的第一个字母

下面是一个结果的示例：

<ul class="mylist">
    <li><strong>A</strong></li>
    <li>AAA</li>
    <li>AAA</li>
    <li>AAA</li>
    <li><strong>B</strong></li>
    <li>BBB</li>
    <li>BBB</li>
    <li><strong>C</strong></li>
    <li>CCC</li>
</ul>

A
AAA
AAA
AAA
B
BBB
BBB
C
CCC

---

如何做到这一点？

使用jQuery非常简单-请参阅代码注释以了解解释

// shorthand for on document load
$(function() {
    // a variable to store our current first letter
    var currentFirstLetter;

    // for every child of mylist
    $('.mylist').children().each(function() {

    // take the first character of its content
    var thisLetter = $(this)[0].innerHTML.substr(0,1).toLowerCase();

    // if its different to our current first letter then add the required element
    // and update our current first letter
    if (thisLetter !== currentFirstLetter) {
        $(this).before("<li><strong>" + thisLetter.toUpperCase() + "</strong></li>");
      currentFirstLetter = thisLetter;
    }
  });
});

//文档加载时的简写
$（函数（）{
//用于存储当前第一个字母的变量
第一个字母；
//为了我的每一个孩子
$（'.mylist'）.children（）.each（function（））{
//以其内容的第一个字符为例
var thisLetter=$（this）[0].innerHTML.substr（0,1）.toLowerCase（）；
//如果与当前的第一个字母不同，则添加所需元素
//并更新我们当前的第一封信
如果（thisLetter！==currentFirstLetter）{
$（this）.before（“
”+thisLetter.toUpperCase（）+”
”）；
currentFirstLetter=此字母；
}
});
});

---

请使用谷歌“如何在ul jquery中迭代li”，这将把您带到这里：然后您需要进行实现或尝试，并将其发布到这里。这是完全可行的，您的问题应该是“这不起作用”或“我如何使这个算法更快？”您正在寻找一个JS/JQ包装器。你可以按照@abc123的建议去做，并在网上查阅大量关于这个问题的资料。一旦理解了这个概念，就可以将代码放在插件或函数中，然后在需要包装的表上调用它。也就是说，如果您尝试了一些方法，但无法破解它，那么我们都可以在诊断该问题时发挥更大的作用谢谢，这很好，但它不区分大小写。因此，如果您要添加

aAA

，它将添加另一个a。您只需使用toLowerCase和toUpperCase方法操作字符串。。。这太完美了！非常感谢你！你救了我一天！：）