JavaScript选择器:查找包含具有特定属性的子体的节点

JavaScript Selector: find nodes which contains descendants with specific attribute

本文关键字：属性 节点 选择器 查找 包含具 JavaScript      更新时间：2023-09-26

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

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

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

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

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

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

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

感谢

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

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

一旦你有了这个基本上下文，就只需要两部分的过程来获得你想要的li元素：

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

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

在这一点上，只需取所得的li元素组和.remove()元素，display: none;元素。不管你想做什么来阻止他们出现。

相关文章：