JavaScript 选择器 : find nodes which contains descendants with specific attribute

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 );
});

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

谢谢

Answer 1

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

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

一旦有了基本上下文，获取所需的 li 元素实际上只需两部分:

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

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

此时，只需获取生成的 li 元素组和 .remove() 它们， display: none; 它们。 。 。无论你想做什么来抑制它们的出现。