如何使用jQuery在循环中将链接追加到ul列表中？

别担心，这问题很容易搞定！你之前的代码只是直接把文本插入到<strong>里，没正确构建包含<a>标签的嵌套结构。我帮你调整下代码，就能得到你想要的可点击链接效果：

修改后的完整代码 #

const users = ['Bob','Mary', 'Mike'];
const ul = $('<ul></ul>');

users.forEach(function(user) {
    // 先创建<a>标签，设置href、id和文本内容
    const userLink = $('<a>')
        .attr('href', '#')
        .attr('id', user)
        .text(user);
    
    // 构建<li>的完整嵌套结构：li > strong > a
    const listItem = $('<li>').append($('<strong>').append(userLink));
    
    ul.append(listItem);
});

$('#users').html(ul);

代码说明 #

1. 单独构造<a>元素：用jQuery的$('<a>')创建链接标签，通过.attr()方法设置href和id属性，再用.text()填入用户名。
2. 嵌套元素结构：先把<a>放到<strong>里，再把<strong>放到<li>里，保证结构和你期望的完全一致：

   <li><strong><a href='#' id="Bob">Bob</a></strong></li>
   

3. 简化写法（可选）：如果喜欢更紧凑的链式调用，也可以这样写：

   const users = ['Bob','Mary', 'Mike'];
   const ul = $('<ul></ul>');
   
   users.forEach(user => {
       ul.append(
           $('<li>').append(
               $('<strong>').append(
                   $('<a>').attr({ href: '#', id: user }).text(user)
               )
           )
       );
   });
   
   $('#users').html(ul);
   

这样修改后，页面渲染出来的列表项就会是带可点击链接的结构啦！

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