jQuery - 父级 "this"

Question

$('form').each(function(){
  var form = this;
  $('a', this).click(function(){ form.submit(); });
});

有没有办法在不使用中间变量的情况下，在click函数内获取父(this)元素？我想也许有一些关键字我还不知道可以做到这一点。

在$.ajax函数中，有一个context参数，可以让你像这样做。

- Alex

---

你能不能不要使用 $('a', this).click(function(){ $(this).closest('form').submit(); }); 这段代码？或者...你想要一个更简洁/具体的答案吗？ - David Thomas

Answer 1

不，你已经以最佳方式完成了。常规情况下建议使用如下方式：

var that = this;
$('a', this).click(function(){ that.submit(); });

- glortho

---

var self = this; 或者自我。 - Craig M

个人而言，我不喜欢那种约定。当涉及到阅读代码时，使用一个描述性的名称（比如 form）要好得多。 - lonesomeday

这不是问题的一部分：“不使用中间变量”。 - Matt

真的，但我相信这是比其他方案更好、更安全的解决方案。现在Alex可以看到如何做，并强烈建议她保持原样！ - glortho

Answer 2

由于 a 是 form 的子元素，您可以使用 closest：

$('a', this).click(function(){ $(this).closest('form').submit(); });

另一个选项是proxy：

$('a', this).click($.proxy(function(){ this.submit(); }, this));

- Matt

---

使用$.proxy的唯一问题是，您失去了在事件处理程序中引用通常的this引用的能力。 - Josh

@user349433 - 是的，但你也可以传递一个事件参数并检查target。无论如何，在这种情况下我更喜欢使用closest。 - Matt

我认为使用DOM是一个错误的选择。虽然这样做很容易调试，但如果层次结构发生变化，它就会出现问题，并且您会通过再次遍历已经选择的元素来增加脚本的负担。最好保持抽象。 - glortho

Answer 3

当然可以——使用闭包。

$('form').each(function() {
  $('a', this).click((function(x) { return function() { x.submit(); })(this));
});

如果您有一个curry函数（类似于Prototype中的函数，不确定jQuery是否内置了该函数），您可以简化中间行：

$('a', this).click(curry(function(x) { x.submit(); }, this));

- Josh

Answer 4

首先，你的示例是正确的，其次，这是大多数人会做的事情。没有关键字，只需反转方向并遍历DOM以找到最可能的父级（这很傻，因为你已经找到它了，对吧？）。在这种情况下，即使其他回答者已经正确地展示了如何使用closest，我仍建议使用一个中间变量。（另外，它依赖于某种技术性，即

内部的 是无效的HTML。对于像

这样的元素，不能保证它不会穿过任何子元素的

寻找下一个 。）

在jQuery中，你会看到很多这样的东西：

$("#parent").something(function() {

   var _this = this;
// var self = this;
// var that = this;
// var someMoreMeaningfulName = this;

   $("#child", this).somethingElse(function() {
      $(_this).somethingEvenElser();
      ...
   });
});

虽然这段代码看起来不太美观，但是这种模式出现的频率很高，因此很容易被识别。我建议您使用 (var form)，而不是像使用_this（下划线可能会暗示私有变量），self（实际上并不是）。

- brymck

Answer 5

你应该能够用jQuery的parent选择器（或者根据a标签嵌套程度选择parents选择器）来引用它。

所以这样做应该可以：

$('form').each(function(){
  $('a', $(this)).click(function(){ $(this).parent('form').submit(); });
});

- Kyle d'Oliveira