Selecionando o que é visível
O jQuery possui um seletor especial :visible
que seleciona todos os elementos que ocupam algum espaço no documento. Não é exatamente seu requisito sobre display:none
, mas é mais abrangente e provavelmente mais útil.
Veja um exemplo:
var qtd = $('#container').children(':visible').length;
console.log("Quantidade", qtd);
var itemTotalWidth = 0;
var qtd = $('#container').children(':visible').each(function() {
console.log($(this).outerWidth(true));
itemTotalWidth += $(this).outerWidth(true);
});
console.log("Largura total", itemTotalWidth);
#container span {
width: 20px;
margin: 0;
padding: 0;
display: inline-block;
}
.none {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<span>bla</span>
<span style="display: none">bla</span>
<span style="width: 30px">bla</span>
<span class="none">bla</span>
<span>bla</span>
<span>bla</span>
</div>
Negando um atributo CSS
Não existem seletor para atributos CSS da mesma forma que existem para atributos HTML.
Uma alternativa que funciona se você tiver total controle sobre os estilos e eles forem inline é selecionar por comparação de texto.
O exemplo a seguir usa um seletor duplo :not([style*="display"]), :not([style*="none"])
, ou seja, ele procura por ambos os valores display
e none
dentro do atributo style
no HTML. Isto não funciona se o atributo for declarado em outro lugar ou alterado dinamicamente.
var qtd = $('#container').children(':not([style*="display"]), :not([style*="none"])').length;
console.log("Quantidade", qtd);
var itemTotalWidth = 0;
var qtd = $('#container').children(':not([style*="display"]), :not([style*="none"])').each(function() {
console.log($(this).outerWidth(true));
itemTotalWidth += $(this).outerWidth(true);
});
console.log("Largura total", itemTotalWidth);
#container span {
width: 20px;
margin: 0;
padding: 0;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<span>bla</span>
<span style="display: none">bla</span>
<span style="width: 30px">bla</span>
<span style="width: 50px; display: none">bla</span>
<span>bla</span>
<span>bla</span>
</div>
Outra alternativa, se tiver total controle sobre os estilos e garantir que não há espaços em branco no valor inline é usar um único seletor :not([style*="display:none"])
.
Entretanto, consideraria essas técnicas gambiarras. Seria melhor usar o :visible
do jQuery ou, ainda melhor, se você tem controle sobre o processo, adicione classes diferentes nos elementos que são visíveis e invisíveis, assim fica muito mais simples executar operações nesses elementos sem gambiarras.