查找父元素的最快最有效的方法
我已经使用这种方法有一段时间了，现在最初没有对其进行任何研究。
$("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') 访问它。
此方法有效，但我想知道是否有更好的方法？理想情况下，我希望它尽可能快速和高效。
I have been using this method for a while now having initially not put any research into it.
$("div#panel-frame div.panel.txt select.fontsize").live('change', function ()
{
var parent = $(this).parents('div.panel.txt');
});
So as you can see from the code above, I'm trying to get access to a parent of select.fontsize. The parent I'm trying to get to is div.panel.txt - as you can see, I'm accessing it by saying $(this).parents('div.panel.txt')
This method works but I'm wondering if there is a better way of doing it? Ideally I want it to be as fast and efficient as possible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果它是您所追求的真正的父（即下一个祖先）元素，那么这应该足够了：
如果您只想要与选择器匹配的父元素，那么就可以解决问题：
但是，如果你在寻找一个 ancestor 元素，那么你可能想要使用
.closest()方法：它沿着 dom 树向上走，并停在与选择器。
If it's a true parent (i.e. next ancestor) element you're after, this should be sufficient:
If you only want the parent if it matches the selector, then is will do the trick:
However, if you're after an ancestor element, then you probably want to use the
.closest()method:which walks up the dom tree and stops at the first ancestor that matches the selector.
更改函数中的内容应该足够高效，但如果您知道所需的元素是直接父元素，则应该使用 .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元素指定一个更具体的类名称，这样您就可以提前知道它们是您想要的元素。What you have inside your change function should be efficient enough, though if you know that the element you want is the direct parent, you should use .parent() instead of .parents(). As other people have said, if you don't know whether it's the direct parent, use .closest() instead of .parents().
In theory, you can use
this.parentNodeto get the parent - regardless of its node or class names - with native DOM traversal (that is, without using jQuery), and that might be a bit quicker. However, you would need to write your own checks to make sure the node and class names match, so any gains you make would probably be lost again. This is basically what jQuery is doing under the hood anyway, and jQuery is very heavily optimised already.Your
.liveselector$("div#panel-frame div.panel.txt select.fontsize")is probably a bigger worry in terms of speed..live()works by assigning an event to the body element, and then watching the targets of events as they bubble up. So, when any 'change' event hits the body, jQuery needs to check if it originated at something matching'div#panel-frame div.panel.txt select.fontsize', which is a very slow operation, especially in older browsers.It would probably be quicker to just bind
.live()to $('select.fontsize'), and then check if the select element is the kind you want within the event handler itself. That way, jQuery can use the browser's native 'getElementsByTagName', which is a fast operation. Better yet, give yourselect.fontsizeelements a more specific class name, so you know in advance that they're the ones you want.最快，还是“最正确”？如果您只想要第一个这样的祖先，请使用 closest 而不是
parents。Fastest, or "most correct?" Use closest instead of
parentsif you only want the first such ancestor.如果您只想查找一个祖先，则可以使用
.closest( )来找到它。.parents()将找到与选择器匹配的所有祖先。If you’re only looking for one ancestor, you can use
.closest()to find it..parents()will find all of the ancestors which match the selector.