I have a long list of <li>
items I need to filter. I want the visible ones. Here's an example hidden one:
<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>
Those which are not hidden don't have a display visible attribute, they just don't have a style attribute at all.
This gives me the opposite of what I want:
document.querySelectorAll('.newSearchResultsList li[style="display:none;"]')
How can I select based on style attribute does not equal or contain "display:none;"?
This whole thing is kind-of hacky, but you could use the :not()
selector to invert your selection. Beware some browser normalize the style attribute, so you will want to include a selector for the space that may be normalized in.
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;">visible 1</li>
<li style="display:none;">hidden 2</li>
<li style="display:block;">visible 2</li>
</ul>
If you want you could also select both these elements and any child elements.
const selector = '.newSearchResultsList li:not([style*="display:none"]):not([style*="display: none"])';
const elements = document.querySelectorAll(`${selector}, ${selector} *`);
console.log(elements);
<ul class="newSearchResultsList">
<li style="display:none;">hidden <i>1</i></li>
<li style="display:block;">visible <b>1</b></li>
<li style="display:none;">hidden <i>2</i></li>
<li style="display:block;">visible <b>2</b></li>
</ul>
Of course, these only work when selecting elements with inline styles.
Try this:
document.querySelectorAll('.newSearchResultsList li:hidden')
or (EDIT: Based on style attribute.)
document.querySelectorAll('.newSearchResultsList li[style*="display:none"]');
or opossite
document.querySelectorAll('.newSearchResultsList li:not([style*="display:none"])');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With