Question

修改结构是未知的 - 它应该适用于任何新闻站点，其中有一个容器/包装器，其中包含h1和p + p（与该页面主要文章相关的所有内容）

我想要的也可以通过

来实现

let story = document.querySelector('p+p').parentElement;
while(!story.querySelector('h1')){
    story = story.parentElement;
}
console.log(story);

但我想知道是否有更好的解决方案？

每篇新闻文章都有h1标签和带文字的段落。我想知道是否可以编写一个querySelector来选择包含h1和p + p 的最接近的父/容器元素。诀窍是它应该与任何新闻网站合作......

当我写

document.body.querySelector('* h1')

我可以获得h1容器，但根据HTML5，页面上可能有多个h1标签

我知道querySelectorAll，但这对我的情况没有帮助

当我写

document.body.querySelector('* p+p').parentElement

我可以使用文本段落获取文章正文的容器

我的问题是，是否可以将这两个示例合并为一个查询？（没有循环和多个查询）有点像...

document.body.querySelector('* ~ h1 ~ p+p')
document.body.querySelector('* h1 p+p')

......但可行

Answer 1

我创建了一个jQuery解决方案。

Stack Snippet

＆＃13;

$('.block').each(function(e) {
  if ($(this).find('h4').length > 0 && $(this).find('p+p').length > 0) {
    console.log('block ' + (e + 1))
  }
});

＆＃13;

body {
  font: 13px Verdana;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block vv">
  <h4>heading</h4>
  <p>para1</p>
  <p>para2</p>
</div>
<div class="block">
  <h4>heading</h4>
  <p>para1</p>
</div>
<div class="block">
  <h4>heading</h4>
  <p>para1</p>
  <p>para2</p>
</div>

＆＃13;

我希望这会对你有所帮助！

Answer 2

我的问题是，是否可以将这两个示例合并为一个查询？

tl;博士：不，不是。当然不是今天，也许不会很快。如果您对实际答案以外的任何事情不感兴趣，这就是您需要知道的全部内容;此段落之后的所有内容都是与标准中尚不存在的功能相关的背景信息。

这取决于您的意思＆＃34;单个查询＆＃34;。你的意思是＆＃34;一个单一的任务＆＃34;？如果是这样，那么标准化from jQuery的:has()伪类in Selectors 4将会有很大的帮助：

// In jQuery: $('p+p').closest(':has(h1)')
let story = document.querySelector('p+p').closest(':has(h1)');

但请注意，它与Element#closest()一起使用，此外，:has()原生不支持，并且没有计划在不久的将来在任何浏览器中实现它。因此，如果jQuery不是一个选项，那么你所拥有的就是你已经有很长一段时间了。

如果通过＆＃34;单个查询＆＃34;你的意思是＆＃34;一个选择器＆＃34;，那么答案是否定的，因为它不可能编写一个与两个或多个后代的最近共同祖先匹配的选择器。最接近的是:has(h1):has(p+p)，但这将匹配每个这样的祖先，从最内层的那些开始并一直领先到根元素。没有选择器可以匹配最里面的这些。

Answer 3

根据您提供的网站，只使用儿童和兄弟选择器。以下将有效：

window.document.querySelector("*>h1, * p+p").parentNode

它选择具有h1的所有元素和具有多个p标记的所有元素。我在您提供的页面上尝试了它，它产生的结果与您的JS代码相同。

一些额外的注释，因为你没有指定jquery我给你一个JavaScript解决方案。目前没有父选择器或querySelector，所以parentNode是最接近它的东西。最后，您的原始解决方案指定了文章（而不是像页面那样的div）。如果你想要，只需换掉文章的div。

querySelector为h1和p + p元素选择最接近的父元素 - 是否可能？

但我想知道是否有更好的解决方案？

3 个答案: