【问题标题】:jQuery Get the original context from a findjQuery 从查找中获取原始上下文
【发布时间】:2026-02-05 07:40:01
【问题描述】:

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

<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() 是更好的选择?
  • 是的,但实际上我的嵌套比我的示例更深

标签: jquery jquery-selectors dom-traversal


【解决方案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');
      

      【讨论】: