如何用jQuery或Javascript获取mycontainer内password类型input的输入值

• closest() 方法使用错误：closest() 用于查找当前元素的祖先元素，而input是点击元素的同级元素，不是祖先，所以永远查找不到对应元素。你需要先查找最近的.mycontainer祖先容器，再在容器内查找目标input。
• 属性选择器语法错误：正确的密码输入框选择器语法是input[type='password']，你写的input type=['password]不符合选择器语法规范，缺少闭合引号、属性选择器方括号位置错误。
• jQuery取值方法错误：jQuery对象获取输入值的方法是val()，不存在value()方法，原生DOM对象才用.value属性取值，调用不存在的方法会直接抛出异常。
• 缺少存在性判断：没有判断是否查找得到密码输入框，非密码输入框的容器点击后也会执行取值逻辑，会拿到空值甚至报错。

仅需要修改JS部分即可：

function myFunction(el) {
  // 先定位所属的mycontainer容器，再查找容器内的密码输入框
  const $pwdInput = $(el).closest('.mycontainer').find('input[type="password"]');
  // 仅当容器内存在密码输入框时才执行取值操作
  if ($pwdInput.length) {
    const theInput = $pwdInput.val();
    console.log(theInput);
  }
}

修改后点击第二个、第四个容器的Click Me会分别输出myinput2、myinput4，点击其余两个容器不会有输出也不会抛出错误，符合需求。

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