querySelector（）は表示されません

Question

私はフィルタリングする必要がある<li>アイテムの長いリストを持っています。私は目に見えるものが欲しい。ここには隠れた例があります：

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

隠されていないものは、表示可能な表示属性を持たず、まったくスタイル属性を持たないだけです。私はスタイル属性に基づいて選択することができますどのように

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

が等しくないか、含まれています。これは、私が何をしたいの反対与え

「表示：なし;」？

Answer 1

この全体のこと一種のハッキーですが、:not() seあなたの選択を逆転させる。あなたが正規化されてもよいスペースのためのセレクタを含めることになるでしょうので、いくつかのブラウザはスタイル属性を正規化用心

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>

Answer 2

これを試してみてください：

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

または（EDITを：style属性に基づいています。）

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

またはopossite

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

Answer 3

• 使用'.newSearchResultsList li'セレクタをすべてliを選択するには要素
• 使用getComputedStyle
コレクション上の使用の Array#filter 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>