Jquery 如何从元素中查找父窗体？

我正在尝试使用下面的代码从元素中查找父窗体：

<form id="f1" action="action1.html">
form1 <button id="btn1" onclick="testaction(this); return false;" >test form 1</button>
</form>


<script type="text/javascript" >
function testaction(element) {
    var e = $(element.id);
    var form = e.parent('form');

    alert(form.id); // undefined!!
    alert(form.action); // undefined!!
    alert(document.forms[0].action); //http://localhost/action1.html
}
</script>

表格1测试表格1
功能测试（元素）{
var e=$（element.id）；
var form=e.parent（‘form’）；
警报（form.id）；//未定义！！
警报（form.action）；//未定义！！
警报（document.forms[0]。操作）//http://localhost/action1.html
}

应该是非常简单的事情。。。。提前谢谢

我会的。像这样使用

$('#elem').closest('form');

---

将内联事件处理程序抛出并在此处保持低调

$(document).ready(function(){
   $('#btn1').bind('click', function(){
      var form = $(this).closest('form')[0];

      alert(form.id); // defined
      alert(form.action); // defined
   });
});

---

参考：，

您遇到的问题是，

form

是一个jQuery对象，而不是DOM对象。如果希望它成为表单对象，可以执行

e.parent（'form'）。get（0）

此外，您对元素的处理不正确—jQuery以

#id

的形式使用id选择器，但您已经传递了它

id

以下是一个工作版本：

function testaction(element) {
  var e = $(element);//element not element.id
  var form = e.parent('form').get(0);//.get(0) added

  alert(form.id); // undefined!!
  alert(form.action); // undefined!!
  alert(document.forms[0].action); //http://localhost/action1.html
}

请参见此以了解其实际操作：

---

编辑：拼写、清晰度

按钮元素具有表单属性

表格1测试表格1
表格二测试表格二
$（'button[type=“submit”]”）。单击（函数（e）{
var form=$（this.parent（“form”）.get（0）；
警报（“ID:+form.ID”）；
警报（“操作：+表单操作”）；
e、 预防默认值（）；
});
函数get_attr（元素）{
var form=$（元素）.parent（“form”）.get（0）；
警报（“ID:+form.ID”）；
警报（“操作：+表单操作”）；
}

---

.parent

只提供直接的祖先。你应该只

$（element）

而不是

$（element.id）

。那么

btn1.form

呢？最佳解决方案，与parents（）不同，它在找到匹配项后会停止，而

btn1.form

是最接近的（）是一个更好的解决方案，因为一旦找到匹配项，它就会停止。

最接近（“表单”）[0]

是正确的解决方案，返回了正确的元素<代码>父项（'form'）。获取（0）返回

未定义
！变量
表单
在这里是
未定义的
。@jAndy的解决方案有效。这绝对是错误的代码！
.parent（）
只在DOM树中向上移动一个级别，因此，如果表单包含一些中级父级，例如当元素位于
div
中时（例如：
form>div>元素
），此函数将返回该
div
而不是表单@S.Serpooshan-在问题中给出的示例中，表单是直接父级。如果您想要表单，并且它可能在DOM树中更高，您可以使用
最近（'form'）
@Ryley是的，我知道了，但是在html元素周围有几个容器是很常见的。你认为你的解决方案可靠吗？？通常这样的解决方案会很快破坏代码，当你在不知道问题出在哪里的情况下继续向代码中添加更多功能时。IE 4.0+支持输入元素的
.form
属性！
function testaction(element) {
  var e = $(element);//element not element.id
  var form = e.parent('form').get(0);//.get(0) added

  alert(form.id); // undefined!!
  alert(form.action); // undefined!!
  alert(document.forms[0].action); //http://localhost/action1.html
}

buttonElement.form

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="f1" action="action1.html">
form1 <button id="btn1" onclick="get_attr(this); return false;" >test form 1</button>
</form>

<form id="f2" action="action2.html">
form2 <button type="submit" >test form 2</button>
</form>

<script>

$('button[type="submit"]').click(function(e) {
    var form = $(this).parent("form").get(0);
    alert("ID: " + form.id);
    alert("Action: " + form.action);
    e.preventDefault();
});
function get_attr(element) {
    var form = $(element).parent("form").get(0);
    alert("ID: " + form.id);
    alert("Action: " + form.action);
}

</script>