querySelector（），其中顯示不無

我有<li>項目我要過濾一個長長的清單。我想要可見的。這裏有一個隱藏的例子：querySelector（），其中顯示不無

<li style="display:none;" 
<a href="https://www.example.com/dogs/cats/"> 
<img class="is-loading" width="184" height="245" 
</a><span>dogscats</span> 
</li>

那些沒有隱藏的沒有顯示可見屬性，他們根本沒有一個style屬性。

這給我的，我想的正好相反：

document.querySelectorAll('.newSearchResultsList li[style="display:none;"]')

我怎麼能選擇基於樣式屬性不等於或包含「顯示：無;」？

來源

2016-10-02 Doug Fir

這整個事情是種善良的，但你可以使用:not() se lector來反轉你的選擇。謹防一些瀏覽器標準化的樣式屬性，因此你將要包括可以在被標準化的空間選擇

var elements = document.querySelectorAll(
 
    '.newSearchResultsList li:not([style*="display:none"]):not([style*="display: none"])' 
 
); 
 

 
console.log(elements);

<ul class="newSearchResultsList"> 
 
    <li style="display:none;">hidden 1</li> 
 
    <li style="display:block;">visisble 1</li> 
 
    <li style="display:none;">hidden 2</li> 
 
    <li style="display:block;">visisble 2</li> 
 
</ul>

來源

2016-10-02 01:53:02

嗨感謝回答，我更喜歡這個答案的簡單性，但「當心一些瀏覽器標準化的樣式屬性，你會想要包括一個選擇器的空間，可能被歸一化。「這是什麼意思？否定只是使用not（）似乎是一個竅門，但我現在很害怕使用它嗎？你可以擴展它的含義嗎？乾杯！ –

@DougFir一些瀏覽器基本上會將style屬性格式化以插入這些頁面可以在解析時自動生成，也可以在更改樣式屬性時使用。這就是爲什麼空間應該包含在選擇器中，而我的代碼有一個「：not」的空間和一個沒有的空間。 –

試試這個：

document.querySelectorAll('.newSearchResultsList li:hidden')

或（編輯：基於樣式屬性。）

document.querySelectorAll('.newSearchResultsList li[style*="display:none"]');

或opossite

document.querySelectorAll('.newSearchResultsList li:not([style*="display:none"])');

來源

2016-10-02 01:44:25

'：hidden'不是JavaScript的一個標準部分。 jQuery支持它，但不支持'document.querySelectorAll（）'。 – jfriend00

標籤是JavaScript和jQuery的選擇器，只是回答> _ < –

嗨，你的第二行是我需要的相反！我需要「不包含」。我嘗試使用！=但那不起作用 –

使用'.newSearchResultsList li'選擇器選擇所有li元素
使用Array#filter在收集
使用getComputedStyle得到與元素相關聯的所有樣式
只返回其style這些元素！== none

var liElems = document.querySelectorAll('.newSearchResultsList li'); 
 
var filtered = [].filter.call(liElems, function(el) { 
 
    var style = window.getComputedStyle(el); 
 
    return (style.display !== 'none') 
 
}); 
 
console.log(filtered);

<ul class="newSearchResultsList"> 
 
    <li style="display:none;"> 
 
    <a href="https://www.example.com/dogs/cats/"> 
 
     <img class="is-loading" width="184" height="245"> 
 
    </a><span>dogscats</span> 
 
    </li> 
 
    <li> 
 
    <a href="https://www.example.com/dogs/cats/"> 
 
     <img class="is-loading" width="184" height="245"> 
 
    </a><span>Visible</span> 
 
    </li> 
 
</ul>

來源

2016-10-02 01:52:28 Rayon

querySelector（），其中顯示不無

回答

相關問題