如何在jQuery中向已追加元素内追加数据？

步骤1：搭建基础结构 #

先给每个帖子区域追加点赞相关的容器结构，包含点赞触发区和隐藏的点赞者名单容器：

$('.posted-area').each(function() {
  $(this).append(`
    <div class="posted-footer">
      <span class="like-trigger">点赞</span>
      <div class="other-list" style="display: none;"></div>
    </div>
  `);
});

步骤2：遍历点赞数据追加名单 #

将每个帖子对应的点赞用户数据，精准追加到对应帖子的.other-list容器中（需保证数据和帖子一一对应，避免串位）：

// 示例：通过帖子的data属性关联专属点赞数据
$('.posted-area').each(function() {
  const $currentPost = $(this);
  const postId = $currentPost.data('post-id'); // 每个帖子需设置唯一的data-post-id="xxx"
  // 模拟接口返回的当前帖子点赞用户数组，实际项目替换为真实接口数据
  const likeUsers = [
    {name: '张三'},
    {name: '李四'},
    {name: '王五'}
  ];

  const $listContainer = $currentPost.find('.other-list');
  $listContainer.empty(); // 清空旧数据，防止重复追加

  likeUsers.forEach(user => {
    $listContainer.append(`<span class="like-user">${user.name}</span>`);
  });
});

步骤3：绑定悬停显示/隐藏事件 #

给点赞触发区绑定hover事件，实现鼠标悬停显示名单、离开隐藏的交互：

$('.posted-footer').hover(
  function() {
    $(this).find('.other-list').show();
  },
  function() {
    $(this).find('.other-list').hide();
  }
);

补充核心样式 #

要让名单呈现Facebook式悬浮弹窗效果，需添加定位和基础样式：

.posted-footer {
  position: relative; /* 作为悬浮名单的定位父级 */
  margin-top: 8px;
}
.other-list {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: 200px;
}
.like-user {
  display: block;
  padding: 4px 0;
  color: #1c1e21;
  font-size: 14px;
}
.like-trigger {
  color: #65676b;
  cursor: pointer;
}

关键注意事项 #

• 若点赞数据是异步获取，需在接口回调成功后再执行追加名单的代码
• 动态加载的帖子（如滚动加载），需在新帖子插入DOM后，重新执行结构搭建、数据追加和事件绑定逻辑
• 务必保证每个帖子的data-post-id唯一，避免不同帖子的点赞数据混淆

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