递归搜索节点树

Question

场景：我有一个列表项的无序列表。每个列表项中都有一个跨度，每个跨度中都有一个 img 标签。所以我的html结构看起来像这样。

<ul class="slider-controls">
    <li data-preview1="./images/1.1.jpeg" data-preview2="./images/1.2.jpeg"><span><img src="./images/color1.jpeg"></img></span></li>
    <li data-preview1="./images/2.1.jpeg" data-preview2="./images/2.2.jpeg"><span><img src="./images/color2.jpeg"></img></span></li>
    <li data-preview1="./images/3.1.jpeg" data-preview2="./images/3.2.jpeg"><span><img src="./images/color3.jpeg"></img></span></li>
  </ul>

img 标签只是很小的方形颜色样本，跨度被设计成圆形，所以你所拥有的基本上是一个由三个彩色点组成的颜色选择器，供用户点击。

当用户单击 li 时，我正在使用 javascript 来获取数据预览，以便我可以使用该信息来更改图片。如果用户在圆圈外稍微点击一下，这将非常有效。但是，如果他们在圆圈内点击，他们最终会点击 img 标签。但是我需要的数据是 li 标签中的两个父节点！

所以我写了一个递归函数来解决这个问题。

function findUpTag(el, tag) {
  console.log(el.tagName, tag);
    if (el.tagName === tag) {
      console.log("success!", el);
      return el;
    } else {
      findUpTag(el.parentNode, tag);
    }
}

我就是这么用的findUpTag(el, "LI");

我知道我的递归搜索正在工作，因为当当前元素 === "LI" 时，我总是得到 console.log("success") 输出。

但是，当我单击图像标签时，我的返回值始终是未定义的！即使我的方法找到了 LI！

我做错了什么？

Answer 1

这是因为您没有返回递归调用的结果。你还需要处理el.parentNode为null的情况：

function findUpTag(el, tag) {
  console.log(el.tagName, tag);
    if (el.tagName === tag) {
      console.log("success!", el);
      return el;
    } else {
      return el.parentNode ? findUpTag(el.parentNode, tag) : null; // <====
    }
}

FWIW，虽然您可以为此使用递归，但没有必要；树只有一条向上的路径。所以它可能只是一个简单的循环：

function findUpTag(el, tag) {
  while (el) {
    if (el.tagName === tag) {
      console.log("success!", el);
      return el;
    }
    el = el.parentNode;
  }
  return null;
}