如何在jQuery中无需多层.parent()获取带变量的唯一ID定位P元素

我完全懂你不想用一堆嵌套的parent()来定位元素的心情——这种写法不仅可读性差，而且只要DOM结构稍微调整就会直接失效，确实够头疼的。结合你的需求（不用onclick传参、依赖唯一ID），这里有两个更健壮且优雅的解决方案：

方案1：给编辑按钮绑定对应评论ID的data属性 #

在渲染评论行的时候，直接给编辑按钮加上data-comment-id属性，把当前评论的object.id绑定进去。这样点击按钮时，直接从这个属性里拿到ID，再通过唯一的#comment-object-{id}选择器定位到对应的<p>元素，完全不用遍历DOM层级。

修改后的渲染函数： #

function renderCommentLine(object) {
  // 假设authorImage、author、timesince、authUsername这些变量已提前定义
  var htmlStart = `<div class='media cfe-media'>${authorImage}
    <div class='media-body'>${author}<small> vor ${timesince}</small>
    <p id='comment-object-${object.id}' class='media-content' data-id='${object.id}'>${object.content}</p>`;

  if (object.user && object.user.username == authUsername) {
    // 给按钮加唯一ID和data-comment-id，避免重复id导致的HTML规范问题
    htmlStart += `<div class="dropdown">
      <button id="dropdown-button-${object.id}" data-toggle="dropdown">
        <span style="font-size: 3rem;" class="material-icons">more_vert</span>
      </button>
      <div class="dropdown-menu">
        <button class="media-edit" id="dropdown-item-edit-${object.id}" type="button" data-comment-id="${object.id}">
          <span style="font-size: 2.5rem;" class="material-icons">create</span> Bearbeiten
        </button>
        <button class="comment-delete" id="dropdown-item-delete-${object.id}" type="button" data-comment-id="${object.id}">
          <span style="font-size: 2.5rem;" class="material-icons">delete</span> Löschen
        </button>
      </div>
    </div>`;
  }

  var html_ = `${htmlStart}</div></div>`;
  return html_;
}

修改后的点击事件： #

$(document).on('click', '.media-edit', function(e){
  e.preventDefault();
  // 直接从按钮的data属性获取评论ID
  var commentId = $(this).data('comment-id');
  // 通过唯一ID选择器精准定位目标元素
  var contentHolder = $(`#comment-object-${commentId}`);
  var contentTxt = contentHolder.text();
  var objectId = contentHolder.data('id'); // 或者直接用commentId，两者值一致

  contentHolder.replaceWith(generateEditForm(contentTxt, objectId));
});

方案2：用closest()替代多层parent()（无需额外data属性） #

如果不想给按钮加额外的data属性，可以用closest()方法向上查找最近的.media容器，再在容器内查找.media-content元素。这种写法比一堆parent()更健壮，因为它只关心最外层的容器，不管中间嵌套多少层：

$(document).on('click', '.media-edit', function(e){
  e.preventDefault();
  // 向上找最近的.media容器，再在容器内定位目标元素
  var contentHolder = $(this).closest('.media').find('.media-content');
  var contentTxt = contentHolder.text();
  var objectId = contentHolder.data('id');

  contentHolder.replaceWith(generateEditForm(contentTxt, objectId));
});

额外优化提示： #

• 原代码里多个按钮共用了同一个id="dropdown-item"，这违反了HTML规范（id必须唯一），我在方案1里给每个按钮的id加上了object.id后缀，避免了冲突。
• 使用ES6模板字符串（反引号`）比传统字符串拼接更易读、更不易出错，推荐长期使用。

这两种方案都完美避开了你提到的所有问题，代码也更易维护、更健壮。

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