.parent().parent().parent() 与 .closest("li") [关闭]答案

【问题标题】：.parent().parent().parent() vs .closest("li") [closed].parent().parent().parent() 与 .closest("li") [关闭]
【发布时间】：2013-12-09 05:24:25
【问题描述】：

在搜索 DOM 时，哪个更可取？

var li = el.parent().parent().parent();

或

var li = el.closest("li");

假设父 <li> 总是正好是上面的 3 个元素。

【问题讨论】：

closest 赢得了可读性！
相信您的问题的答案可以在这里找到：stackoverflow.com/questions/2264954/…
stackoverflow.com/questions/2264954/… 的完全相同的副本
根据我的经验，诸如“父 <li> 将始终正好是上面的 3 个元素”之类的陈述最终不是真的。所以closest('li') 得到我的投票。
从技术上讲，.parent()... 更快，但.closest() 读起来更好。 jsperf.com/multiple-parent-vs-closest

标签： javascript jquery performance

【解决方案1】：

`.closest()`

更高的关注点分离度 - 不会因为微小的结构变化而破坏行为 (JS) - 即将目标元素包装在 <div> 或 <span> 中以进行样式设置；
可读性 - 更清楚地指示最终目标（共同祖先）；
干/短代码。

【讨论】：

【解决方案2】：

虽然我投票结束（“主要基于意见”），但我总是建议closer()，因为它既具有可读性，又因为它将代码从 DOM 的精确结构中抽象出来；所以将起始元素包裹在另一个元素中不会导致它中断，也不会删除包裹元素。

【讨论】：