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);

jQuery递归搜索类的父元素

1 个答案: