如何从兄弟的子元素 javascript 中获取 select 元素（已回答）

Question

我想 select 通过单击一个按钮，该按钮是表单兄弟父级的子级。我知道这很混乱。

<li class="list-group-item d-flex justify-content-between align-items-center task">
      <span class="task"><%= task.taskDescription %></span>
      (this-form)=> <form action="/edit" method="POST" class="hidden edit-form">
        <input type="text" name="taskDescription" />
        <input type="hidden" name="id" value="<%-task._id%>" />
      </form>
      <div class="btns">
        (this-btn)=> <button class="edit">Edit</button>
        <form action="/delete" method="POST">
          <input type="hidden" class="edit" name="id" value="<%-task._id%>" />
          <input type="submit" name="submit" value="Delete" />
        </form>
      </div>
    </li>

Answer 1

您可以直接使用任何唯一选择器 select 表单。 id 可能是最好的，但在给出的示例中，您可以使用document.querySelector('.edit-form') 。

如果有多个相似的元素，并且您希望确保从按钮的 onclick 处理程序中获取具有共同父元素的元素：

function onclick() {
  const form = this.parentNode.parentNode.querySelector('.edit-form');
  // do what you want with form here
}

它的作用是：

1. 从this开始（单击的按钮）
2. Go 到 DOM 元素的父级两次（首先到<div class="btns">然后到<li...>元素）
3. 从那里我们 select <form class="edit-form..."...>元素。