使用带有 dom 元素的 jQuery 选择器

Question

我有一个 javascript 函数，它接收 dom 元素作为参数。在这个函数中，我试图找到最接近的祖先“形式”。我想使用：

function submit_form(obj)
{
    var form1 = $(obj).closest("form");
    alert (form1.id);
}

这里obj是一个提交类型的dom元素。我只是似乎无法让它发挥作用。
有人可以帮忙吗？

Answer 1

你想要

function submit_form(obj)
{
    var form1 = $(obj).closest("form")[0];  
    alert (form1.id);
}

jQuery 选择/遍历函数的结果总是是一个数组，可能只有一个元素，但仍然是一个数组。索引数组以获取实际的 DOM 元素。

但是，只要 obj 是 input/select/textarea 元素，您就可以在没有 jQuery 的情况下执行此操作。

function submit_form(obj)
{
    var form1 = obj.form;  
    alert (form1.id);
}

为了完整起见，您也可以留在 jQuery 中并执行以下操作

function submit_form(obj)
{
    var $form1 = $(obj).closest("form");
    alert ( $form1.attr("id") );
}

Answer 2

function closest(obj, tagName) {

   // Go up in the tree until you find the ancestor form
   while (obj.parent !== null) {
      if (obj.nodeType === 1) {
         parent = obj.parentNode;
         if (parent.tagName === tagName) {
            return parent;
         }
      }   
   }

   // If no form exists return null
   if (obj.tagName !== tagName) {
      return null;
   }
}

按这样的方式使用

var closestForm = closest(obj, 'FORM')

Answer 3

form1 将是一个 jQuery 对象，因此您可以使用 .attr("id")，或使用 [0].id< 访问 DOM 元素本身/代码>：

var form1 = $(obj).closest("form");
alert(form1.attr("id"));

var form2 = $(obj).closest("form")[0];
alert(form2.id);