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

Question

是否可以使用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 );
});

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

由于

Answer 1

虽然在vanilla JS中肯定可行，但这在jQuery中实际上非常简单。

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

一旦你有了这个基础上下文，它实际上只是一个两部分的过程来获得你想要的$parentContainer.find("span").not(".priceSale").closest("li"); 元素：

li

第一部分将收集所有＆＃34;非销售＆＃34;在容器中跨越，然后第二部分将为初始组中的每个跨度收集最接近的祖先li元素，并将他们放入一个组中。

此时，只需获取生成的.remove()元素组和display: none;个元素，{{1}}它们。 。 。无论你想做什么来阻止他们出现。