Question

我一直在使用这种方法，现在最初没有对它进行任何研究。

$("div#panel-frame div.panel.txt select.fontsize").live('change', function ()
            {
                var parent = $(this).parents('div.panel.txt');
});

从上面的代码中可以看出，我正在尝试访问select.fontsize的父代。我想要的父母是div.panel.txt - 正如你所看到的，我通过说$（this）来访问它.parents（'div.panel.txt'）

这种方法有效，但我想知道是否有更好的方法呢？理想情况下，我希望它尽可能快速有效。

Answer 1

如果它是你真正的父（即下一个祖先）元素，那么这应该足够了：

var parent = $(this.parentNode); // is faster than $(this).parent();

如果你只想让父母与选择器匹配，那么就可以做到这一点：

var parent = $(this).parent('div.panel.txt');
if ( parent[0] ) {
   ...

但是，如果您正在使用祖先元素，那么您可能想要使用.closest()方法：

var parent = $(this).closest('div.panel.txt');

走向dom树并停在与选择器匹配的第一个祖先。

Answer 2

最快，还是“最正确？”如果您只想要第一个这样的祖先，请使用closest代替parents。

Answer 3

更改功能中的内容应该足够高效，但如果您知道所需的元素是直接父，则应使用.parent（）而不是.parents（）。正如其他人所说，如果你不知道它是否是直接父母，请使用.closest（）而不是.parents（）。

理论上，您可以使用this.parentNode来获取父级 - 无论其节点或类名称 - 使用本机DOM遍历（即不使用jQuery），这可能会更快一些。但是，您需要编写自己的检查以确保节点和类名匹配，因此您所获得的任何收益可能会再次丢失。这基本上就是jQuery正在做的事情，jQuery已经非常优化了。

您的.live选择器$("div#panel-frame div.panel.txt select.fontsize")在速度方面可能是一个更大的担忧。 .live()的工作原理是将一个事件分配给body元素，然后在事件冒泡时观察事件的目标。因此，当任何“更改”事件发生在身体上时，jQuery需要检查它是否源自匹配'div#panel-frame div.panel.txt select.fontsize'的东西，这是一个非常慢的操作，尤其是在旧浏览器中。

将.live()绑定到$（'select.fontsize'）可能会更快，然后检查select元素是否是您在事件处理程序本身中所需的类型。这样，jQuery可以使用浏览器的原生'getElementsByTagName'，这是一个快速的操作。更好的是，给你的select.fontsize元素一个更具体的类名，这样你就可以事先知道它们就是你想要的。

Answer 4

如果您只是在寻找一个祖先，可以使用.closest()进行查找。 .parents()会找到所有与选择器匹配的祖先。

查找父元素的最快捷方式

4 个答案: