查找最近的具有类别的父元素

Question

假设我们有以下标记：

假设我们有以下标记：

<div class="hello">
  <p>
    <a href="#"><span id="start">Start</span></a>
  </p>
</div>

有没有办法在dom树中向上查找，找到最接近$('#start')元素并且该元素含有class属性的元素？

澄清一下： 实际上，我需要获取一个字符串，其中包含从$('#start')到$(.hello)的完整路径，该路径将包含所有元素的标记名称，直到达到$(.hello)元素。 因此，基于上面的标记 - 输出将为: 'span a p .hello'

您可以使用element.prop('tagName')来获取元素的标记名称。

- YemSalat

Answer 1

怎么样？

$('#start').closest("[class]");

- tymeJV

---

谢谢！已点赞，但我其实需要不同的东西（我更新了问题），对此感到抱歉。 - YemSalat

Answer 2

如果你想要最接近的元素，包括你开始的那个元素，使用 .closest：

$('#start').closest('[class]');

如果您想排除起始元素，请使用以下方法：

$('#start').parents('[class]').first();

为了获得完整的匹配路径，请尝试以下方法：

var path = [];
var el = document.getElementById('start');
while (el) {
    if (el.className) {
        path.push('.' + el.className);
        break;
    } else {
        path.push(el.tagName);
    }
    el = el.parentNode;
}
var ancestors = path.join(' ');

请查看http://jsfiddle.net/alnitak/EZWNR/

我使用了原生JS，因为据我所知jQuery没有提供一种简单的方法来选择一个元素及其每个祖先元素。

- Alnitak

Answer 3

您可以使用jQuery的parents()方法获取包含父节点名称的字符串，直到遇到具有类的节点为止。 演示

var path = 'span ';
$('#start').parents().each(function() {
    if($(this).is('[class]')) {
        path += '.' + this.className + ' ';
        return false; // break
    }
    else {
        path += this.nodeName + ' ';
    }
});
console.log(path);

是的，你可以这样做：

$('#start').closest("[class]");

- techfoobar

---

感谢提供 jQuery 解决方案！ - YemSalat