querySelectorAll其中class不包含'hide'

Question

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

返回3个元素：

[
<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”的元素就是我想要的那个。

如何编辑上面的选择器以返回此特定<a>元素？在这个例子中，狗的一个。

Answer 1

使用:not(<selector>)伪类：

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

Answer 2

使用:not伪选择器：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;