JavaScript 选择器：查找包含具有特定属性的后代的节点答案

【问题标题】：JavaScript Selector: find nodes which contains descendants with specific attributeJavaScript 选择器：查找包含具有特定属性的后代的节点
【发布时间】：2016-09-10 19:19:49
【问题描述】：

是否可以使用 Javascript 选择器来查找包含具有特定属性的后代的节点

例如，我想从当前页面中删除所有非销售产品：

var notPriceSales = document.querySelectorAll
    ("body div.contentArea>div.right ul>li span:not(.priceSale)")

这将找到非销售产品的价格标签，但我想找到有后代的li：span：not（.priceSale）

这样我就可以删除所有非销售产品：

Array.prototype.forEach.call( notpriceSales, function( node ) {
  node.parentNode.removeChild( node );
});

如何使用选择器来选择后代节点具有某些特殊属性的节点？

谢谢

【问题讨论】：

您的问题用jquery 标记。 . .你也可以使用 jQuery 解决方案吗？
当然，jquery 或纯 js 都适合我。谢谢，@talemyn
请展示您的 HTML，或简单的简洁 HTML，让您重现您的需求，并显示哪些元素应该匹配，哪些不应该匹配。这样我们就可以提供一个实际的答案，而不是对可能答案的理论解释；这对你和那些后来寻找答案的人来说会更有用。请花时间阅读“How to Ask”和“minimal reproducible example”指南，它们可能有助于解释为什么提供代码既有用又——在许多情况下——如果不是全部——是预期和必需的。

标签： javascript jquery jquery-selectors css-selectors

【解决方案1】：

虽然在原版 JS 中确实可行，但在 jQuery 中这实际上非常简单。

首先，由于我看不到你的 HTML 结构，我只能从你问题中的选择器中做出有根据的猜测，我只是假设所有这些都有一些父元素li 标签。为了确保您只选择这些产品跨度（即，而不仅仅是页面上没有“.priceSale”类的任何跨度），您可以将其用作 jQuery 选择器的基本上下文。我会让你弄清楚你想要什么，并在下面的代码中将其引用为$parentContainer。

一旦您有了基本上下文，实际上只需两部分即可获得所需的 li 元素：

$parentContainer.find("span").not(".priceSale").closest("li");

第一部分将收集容器中的所有“非销售”跨度，然后第二部分将收集初始组中每个跨度的最接近的祖先li元素，并将它们成一个组。

此时，只需获取li 元素和.remove() 它们的结果组，display: none; 它们。 . .你想做什么来阻止他们显示。

【讨论】：