querySelectorAll 其中 class 不包含 'hide'

Question

document.querySelectorAll('.giftUpsell-offer-desc + a')

Returns3个元素：

[
<a href="https://www.qa.example.com" class="button button--primary button--wide u-hide" someattribute="fish">
                    Extend & Save
                  </a>, <a href="www.qa.example.com" class="button button--primary button--wide u-hide" someattribute="cats">
                    Extend & Save
                  </a>, <a href="www.qa.example.com" class="button button--primary button--wide" someattribute="dogs">
                    Extend & Save
                  </a>
]

我需要找到元素当前可见的 "someattribute" 的值。我知道 class 属性不包含 "hide" 的元素是我想要的。

如何将上述选择器编辑为 return 这个特定的 <a> 元素？在这个例子中是给狗的。

Answer 1

使用:not(<selector>)伪class:

.giftUpsell-offer-desc + a:not(.u-hide)

Answer 2

使用 :not 伪选择器：

var els = document.querySelectorAll('.giftUpsell-offer-desc + a:not(.u-hide)');
console.log(els);

<div class="giftUpsell-offer-desc"></div>
<a href="https://www.qa.example.com" class="button button--primary button--wide u-hide" someattribute="fish">Extend &amp; Save</a>
<div class="giftUpsell-offer-desc"></div>
<a href="www.qa.example.com" class="button button--primary button--wide u-hide" someattribute="cats">Extend &amp; Save</a>
<div class="giftUpsell-offer-desc"></div>
<a href="www.qa.example.com" class="button button--primary button--wide" someattribute="dogs">Extend &amp; Save</a>

querySelectorAll 其中 class 不包含 'hide'

querySelectorAll where class does not contain 'hide'

javascript

selectors-api