Question

说我有以下HTML：

<h1>First header</h1>

<h2>Second header</h2>
<div>First div</div>
<div>Second div</div>

<h2>Third header</h2>
<div>Third div</div>
<div>Fourth div</div>

我需要的是找到所有div共享的最近标头的一般方法。在这种特殊情况下，它将是<h1>标题。但标记也可能是：

<h1>First header</h1>

<h2>Second header</h2>

<h3>Third header</h3>
<div>First div</div>
<div>Second div</div>

<h3>Fourth header</h3>
<div>Third div</div>
<div>Fourth div</div>

在这种情况下，第一个共享标头将是<h2>标头。更复杂的情况也是可能的。

我认为主要的困难是最近的（）和parent（）方法没有帮助，因为div没有嵌套在标题下。 prevAll（）方法看起来最有希望，但我还没有找到正确的方法。任何帮助将不胜感激。

Answer 1

如果您要查找的标题是元素的最后一个公共标题，则可以使用smth。像那样

// Get the collection of the all headers
var $h = $('div').siblings('h1,h2,h3,h4,h5,h6');

// Find single headers
var $singles = $h.filter(function(i, el){
    // The hX tag name should be only one in the collection
    return $h.filter(el.tagName).length === 1
});

// Get the last single header
$singles.last().css('color', 'red')

但是这不包括像h1(h2(h2;h3))这样的情况。对于这种情况，您应该手动对div进行分组，然后对这些组进行分组 - 依此类推。

PS ：代码背后的想法或假设非常简单：常见的（搜索）标头始终是单个专业版水平。从您的示例中，我们可以写下逻辑分组： h1(h2;h2)和h1(h2(h3;h3))。现在的任务是找到包含所有leefs的最深的组。从示例中可以清楚地看到，这样的组容器始终是单个逻辑树。现在使用siblings()我们获取所有标题，按计数1过滤它们并取最后一个标题。

但这仅在逻辑组包含具有相同标记名称的标题时才有效，并且没有任何嵌套组与任何祖先具有相同的标记名称。例如，此类逻辑分组无效h1(h2(h2;h2) - 此处匹配的标头将为h1。

希望它有用。

使用jQuery查找最近的共享头

1 个答案: