jQuery 从查找中获取原始上下文

Posted 2023-05-09

【中文标题】jQuery 从查找中获取原始上下文

【英文标题】：jQuery Get the original context from a find

【发布时间】：2011-09-01 07:02:06

【问题描述】：

如果我想获取一个表单，然后抓取一些按钮，然后将一些操作附加到提交表单的那个按钮，我目前正在这样做：

<form>
  <button>Some Button</button>
</form>

$('form').find('button').click(function()
  $(this).closest('form').submit();  // is there a better way of getting the form?
);

我想知道在我的查找中选择原始表单元素是否有更高效的方法。有没有办法在其后代的点击事件中获取对我原始 form 对象的引用，而不是必须遍历 dom？

不幸的是，.context 在这种情况下会给我button 元素，我有什么办法可以获得原始上下文？还是我只需要向上遍历？

请注意，这是一个人为的示例，我实际上并没有使用按钮和表单，但我更感兴趣的是在 find 中获取原始上下文。

【问题讨论】：

不知道什么是最好的性能，但也许 parent() 是更好的选择？

是的，但实际上我的嵌套比我的示例更深

【参考方案1】：

我认为关键是要缓存第一个调用？只需通过 each() 运行它，这将允许您将上下文存储在该方法的参数中。

$('form').each(function(idx,el)
   $(this).find('button').click(function()
      $(el).submit();  
   );
);

【参考方案2】：

这取决于您要执行的操作。如果您在事件回调中，不，没有办法获得原始选择。您拥有的唯一数据是单击了哪个元素，以及有关单击事件本身的一些详细信息。不要忘记form 可以匹配多个不同的元素，因此不可能知道应该匹配哪个元素。 （除非只有一个 - 但它仍然不是一种非常稳定的网站编码方式。）

如果您只是在标准方法链接上下文中，您可以使用end 在搜索中返回一个阶段：

$('form').find('button').prop(name: 'foo', value: 'bar').end().submit();

【讨论】：

是的，我在回调中，不再在链中

【参考方案3】：

如果你只有一个表格，那么你可以这样做：

var $form = $('form');
$form.find('button').click(function() 
    $form.submit();
);

只需计算一次$('form') 并根据需要使用它。

我怀疑$(this).closest('form') 真的会那么贵。 OTOH，好习惯就是好习惯，不要一遍又一遍地计算同一件事通常是一个好习惯。

【参考方案4】：

据我所知，没有办法从找到的对象中引用搜索对象。这是因为您只会获得找到的 JQuery 对象，而不是来自被调用的函数的信息：

var blah = $('blah');

//The following variable will have no direct reference to blah, but 
//blah can still be used if it stays in scope:
var thingWithNoReferenceToBlah = blah.find('thing');