JavaScript中如何通过兄弟父元素的子按钮选中目标form元素

针对你给出的DOM结构，这里提供两种实用的实现方式，不管用原生JavaScript还是jQuery都能轻松搞定：

原生JavaScript实现 #

直接通过DOM遍历定位目标表单，兼容性好，无需额外库：

// 给所有编辑按钮绑定点击事件
document.querySelectorAll('.edit').forEach(btn => {
  btn.addEventListener('click', function() {
    // 先找到当前按钮所在的li父容器
    const taskContainer = this.closest('.task');
    // 在容器内定位目标编辑表单
    const targetEditForm = taskContainer.querySelector('.edit-form');
    
    // 这里可以对表单执行你需要的操作，比如移除隐藏类显示表单
    targetEditForm.classList.remove('hidden');
    // 示例：自动聚焦到输入框
    targetEditForm.querySelector('input[name="taskDescription"]').focus();
  });
});

jQuery实现 #

如果你的项目已经引入jQuery，可以用更简洁的写法：

$('.edit').on('click', function() {
  // 快速定位到目标表单
  const targetEditForm = $(this).closest('.task').find('.edit-form');
  
  // 执行操作，比如显示表单并聚焦输入框
  targetEditForm.removeClass('hidden');
  targetEditForm.find('input[name="taskDescription"]').focus();
});

为什么用.closest('.task')？ #

这种基于父容器的查找方式比直接找兄弟元素更稳定——就算后续DOM结构微调（比如在按钮容器和表单之间新增元素），代码依然能正常定位到目标表单，不会因为元素位置变化而失效。

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