querySelectorAll其中类不包含“隐藏”

Question

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

Returns 3 a elements: 返回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>
]

I need to find the value of "someattribute" where the element is currently visible. 我需要找到元素当前可见的“ someattribute”值。 I know the element with class attribute not containing "hide" is the one I want. 我知道具有class属性的元素不包含“ hide”是我想要的元素。

How could I edit my above selector to return this specific <a> element? 如何编辑上面的选择器以返回此特定的<a>元素？ In this example the one for dogs. 在这个例子中，一只狗。

Answer 1

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

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

Answer 2

Use the :not pseudoselector: 使用: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其中类不包含“隐藏”

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-09-14 02:04:43

解决方案2
1 2016-09-14 02:05:43

querySelectorAll其中类不包含“隐藏”

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-09-14 02:04:43

解决方案2 1 2016-09-14 02:05:43

解决方案1
2 已采纳 2016-09-14 02:04:43

解决方案2
1 2016-09-14 02:05:43