如何为Ajax获取的数据设置HTML样式并生成可点击<li>标签

已成功通过Ajax请求获取数据，但无法按照预期样式渲染页面。目标是将数据渲染为可点击的<li>标签，以下是现有实现代码及预期效果说明：

现有代码 #

$(document).ready(function () {

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/Message/GetMessages",
        traditional: true,
        contentType: "application/json;charset=utf-8",
        success: function (data)
        {
            $('#counter').html(data.length);
            $(data).each(function (index, notice)
            {
                var list = $('#messageList').append('<ul></ul>').find('ul');
                for (var i = 0; i < 10; i++) {
                    list.append('<li><h6>' + notice.subject + '</h6><p>' + notice.body + '<br/></p></li>');
                }
                
            });
            
            
            console.log(data);
            },
        
        error: function (xhr, status, error) { }
    });

预期效果 #

单个无序列表下排列多条消息条目，每条条目包含标题（h6）和内容（p），所有<li>标签具备可点击交互能力，整体样式整洁有序。

现有代码存在3个核心问题，导致渲染不符合预期：

• 重复生成<ul>标签：在遍历数据的循环内每次都给容器添加新的<ul>，最终会生成多个无序列表，而非单个列表下的多条<li>。
• 冗余的for循环：循环10次重复添加同一条数据，导致每条消息被重复渲染10次。
• 缺少点击交互逻辑：未给<li>绑定点击事件，无法实现可点击需求。

修复后的代码 #

$(document).ready(function () {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/Message/GetMessages",
        traditional: true,
        contentType: "application/json;charset=utf-8",
        success: function (data) {
            $('#counter').html(data.length);
            // 预先创建单个ul并添加到容器，避免重复创建
            var $messageList = $('<ul></ul>').appendTo('#messageList');
            // 遍历每条数据生成对应的li
            $(data).each(function (index, notice) {
                // 构建li元素
                var $listItem = $(`
                    <li>
                        <h6>${notice.subject}</h6>
                        <p>${notice.body}</p>
                    </li>
                `);
                // 给li绑定点击事件，这里可替换为实际业务逻辑
                $listItem.on('click', function() {
                    console.log('点击了通知：', notice.subject);
                    // 示例：跳转至详情页
                    // window.location.href = `/Message/Detail/${notice.id}`;
                });
                // 将li添加到ul中
                $messageList.append($listItem);
            });
            console.log(data);
        },
        error: function (xhr, status, error) { }
    });
});

配套样式建议（可选） #

为了让条目更贴合可点击的视觉效果，可添加以下CSS：

#messageList ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#messageList li {
    padding: 12px 15px;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
    transition: background-color 0.2s;
}
#messageList li:hover {
    background-color: #f8f9fa;
}
#messageList h6 {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 600;
}
#messageList p {
    margin: 0;
    font-size: 12px;
    color: #6c757d;
}

内容的提问来源于stack exchange，提问作者Katakyie Kofi Poku