如何使用jQuery的map()方法实现列表按字母排序并解决单词不换行问题

你代码存在3个核心错误导致无法正常拆分显示排序后的列表：

• $.map回调参数顺序错误：jQuery的$.map方法回调参数顺序为「数组元素值、索引」，你写反了两个参数的位置，导致返回内容拼接错误。
• 数组渲染逻辑错误：直接将数组整体插入DOM时，会默认调用toString()方法转为逗号拼接的字符串，无法生成独立的<li>节点。
• DOM操作结构错误：你给已有的<li>标签内部再嵌套<li>，属于非法HTML结构，且没有正确覆盖原有列表内容。

HTML代码（原有代码无需调整） #

<h2 id="test">List of items</h2>
<button id="alpha">A-Z</button>
<ul id="wordlist">
   <li>The</li>
   <li>Hills</li>
   <li>Are</li>
   <li>Alive</li>
   <li>With</li>
</ul>

jQuery代码 #

// 初始收集所有列表项文本
let wordArr = [];
$('#wordlist li').each(function(){
    wordArr.push($(this).text());
});

// 绑定排序按钮点击事件
$('button#alpha').on('click', function(){
    // 按字母排序数组，如需大小写不敏感可替换为 wordArr.sort((a,b) => a.localeCompare(b, 'en', {sensitivity: 'base'}))
    wordArr = wordArr.sort();
    // 批量生成li节点的HTML字符串
    let liHtml = $.map(wordArr, function(item){
        return `<li>${item}</li>`;
    }).join('');
    // 替换列表容器的全部内容
    $("#wordlist").html(liHtml)
});

内容的提问来源于stack exchange，提问作者user14861812