javascript - jQuery递归搜索类的父元素

Question

我对 JavaScript/jQuery 在一个简单函数中看似奇怪的行为感到困惑，我编写了这个函数来通过类名查找父元素。该函数看起来非常简单，因为它检查元素上的类，如果没有找到它，它将调用父元素的相同函数...直到找到该类。

这里是相关的 JSFiddle，https://jsfiddle.net/xxvywa4v/ .

<小时/>

给定以下 HTML:

<div class="outer">
  <div class="inner">
    <div class="innermost">Click Me</div>
  </div>
</div>

以及以下 JavaScript:

function getParentByClass($el, className) { 
  if ($el.hasClass(className)) {
    console.log('found element!', $el); // returns correct element
    return $el;
  } else {
    getParentByClass($el.parent(), className);
  }
}

$('.innermost').on('click', function(e) {
  var $outerEl = getParentByClass($(e.target), 'outer');

  console.info($outerEl); // undefined
});

为什么在 getElementByClass 中正确记录并找到该元素，但却以 undefined 的形式返回到点击处理程序？

(注意:我对重现此功能的替代方法不感兴趣，而是对它在这个特定实现中不起作用的原因感兴趣)

Answer 1

小错误，您实际上并没有返回在递归中找到的内容。当你找到它时，你会返回它，但你不会将其冒泡来返回:

} else {
    getParentByClass($el.parent(), className);
}

您还需要在此处放置一个返回:return getParentByClass($el.parent(), className);