Javascript 如何优化代码，如；这是.parentNode.parentNode.parentNode…“；？

如您所见，我的代码中有一部分是这样的：

var topClick = function() {
  child = this.parentNode.parentNode.parentNode.parentNode;
  child.parentNode.removeChild(child);
  var theFirstChild = document.querySelector(".m-ctt .slt");
  data[child.getAttribute("data-id")].rank = 5;
  insertBlogs();
};

---

有没有其他方法可以优化代码（不使用jQuery）？

您可以使用递归助手函数，例如：

this.parentNode.parentNode.parentNode.parentNode;  

function(event){
console.log(event.path[4]);
child = event.path[4];
}

惊喜！我通过console.log打印事件。 并在事件中找到如下数组：

我找到了我想要的元素：

var topClick = function(event){
    console.log(event);
    child = this.parentNode.parentNode.parentNode.parentNode;
    child.parentNode.removeChild(child);
    var theFirstChild = document.querySelector(".m-ctt .slt");
    data[child.getAttribute("data-id")].rank = 5;
    insertBlogs();
};

它真的起作用了！多么神奇！也许事件代理是另一种方式
还是要谢谢你的回答

---

下次提问之前，我会先考虑一下D

您可以使用非递归辅助函数，例如：

this.parentNode.parentNode.parentNode.parentNode;  

function(event){
console.log(event.path[4]);
child = event.path[4];
}

另一种方法

---

你的目标 根据您对原始问题的评论，您的总体目标是：

有一个博客列表。每个博客都有一个类似“编辑”和“删除”的按钮。当我点击这些按钮时，我想找到它的blog元素

我相信解决你所面临的问题的最好方法（与回答你所问的问题相反——对不起！）是以不同的方式解决问题

从你的评论中，你说你有这样的想法：

这是一个关于Instagram中一些最好的船只的博客。
删除
编辑


一个关于南非山羊日常冒险的博客。
删除
编辑


一个关于容器和袋子以及喜爱它们的主人的博客。
删除
编辑

您的目标是为每个

博客链接

项目向

按钮

元素添加

单击

事件处理程序

让我们把这个目标从简单的英语翻译成伪代码：

function nthParent(element, n) {
  while(n-- && element)  
    element = element.parentNode;
  return element;
}

示例脚本 工作示例：

函数deleteClickHandler（事件，父级）{
event.stopPropagation（）；
parent.remove（）；
}
函数editClickHandler（事件，父级）{
event.stopPropagation（）；
var description=parent.getElementsByClassName（“博客描述”）[0]；
description.innerHTML=prompt（“输入新描述：”）；
}
函数addClickHandlers（）{
var bloglistElement=document.getElementById（“博客列表”）；
var blogitems=bloglistElement.getElementsByClassName（“blog项”）；
forEach（函数（blogitem）{
var deleteButtons=blogitem.getElementsByClassName（“删除按钮”）；
deleteButtons.forEach（函数（deleteButton）{
deleteButton.onclick=函数（事件）{
返回deleteClickHandler（事件、blogitem）；
}
});
var editButtons=blogitem.getElementsByClassName（“编辑按钮”）；
编辑按钮。forEach（函数（编辑按钮）{
editButton.onclick=函数（事件）{
返回editClickHandler（事件，blogitem）；
}
});
});
}
HTMLCollection.prototype.forEach=Array.prototype.forEach；
addClickHandlers（）；

解释 您选择的实现解决方案的方式是有效的，但我想我会给您一种不同的方式来看待同一个问题

在我看来，

blog

实体的内部标记不必知道周围HTML的结构或属性，您的

edit

和

delete

按钮才能工作

原始解决方案必须从父元素链上的每个

按钮开始反向工作，直到找到它认为正确的父元素，这是基于一种脆弱的方法，例如硬编码在父元素链中上移
N
次。如果我们可以使用普通的JavaScript元素选择来绝对确定我们选择的是什么，这不是更好吗？这样，无论HTML结构如何变化，只要类和ID保持一致，我们的JavaScript就不会崩溃

此解决方案迭代
#blog list
元素中的每个
博客项目
：

blogitems.forEach（函数（blogitem）{…}）

在
forEach
循环中，我们获取包含
.delete button
和
.edit button
元素的数组。在这些元素中的每个元素上，我们将适当的事件处理程序添加到
onclick
属性：

for each `blog-link` `b`
  delete_button.onclick = delete_handler(`b`);
  edit_button.onclick = edit_handler(`b`);

对于数组中的每个deleteButton元素，我们为事件处理程序
onclick
分配一个匿名函数。创建这个匿名函数允许我们创建一个闭包

这意味着每个
delete按钮。onclick
函数将分别“记住”它所属的
blogitem

查看此SO关于闭包的问题/答案以了解更多信息：

我们加入
HTMLCollection.prototype.forEach…
行，为所有
HTMLCollection
对象提供
forEach
功能。类似于
getElementsByClassName
的函数返回
HTMLCollection
对象。在大多数情况下，它的行为与数组完全相同，但默认情况下，它不允许我们使用
forEach
。关于兼容性的注意事项：您当然可以使用标准的
for
循环，因为
forEach
并非在所有浏览器中都可用（主要是旧的IE浏览器造成的）。我更喜欢forEach这个成语

最终结果
最终的结果是代码稍微长一点，因为问题的范围比您实际提出的问题要宽一点。优点是此代码更加灵活，并且不易被HTML结构的更改破坏。
您尝试过循环吗？@Bergi-循环效率较低。OP知道他们想爬多远。该对象似乎是“较少键入”，而不是“快速搜索与规则匹配的元素”。@kpsingh-搜索方向错误。问题是向上看，而不是向下看