3

Preciso realizar a contagem de elementos dentro de uma div que não contém a propriedade display:none para depois calcular e somar a largura de todos esses elementos.

A função de calcular e somar seria essa:

$('#gallery').children().each(function(){
        itemTotalWidth += $(this).outerWidth(true);
});
console.log("A largura total dos itens da galeria é: "+itemTotalWidth);

Mas dessa forma ela pega todos os elementos dentro da div#gallery e eu só quero o que não possui display:none setado como atributo inline.

Alguma ideia?

1
  • Mas você quer todos os que não possuem display:none ou apenas os que possuem display:inline ? Commented 18/07/2016 às 1:50

2 Respostas 2

2
var elements_without_display_none = []

$('#gallery').children().each(function(i, el) {

    var $currentEL = $(el);

    if($currentEl.css("display") != "none") {
        elements_without_display_none.push($currentEL)
    }

});

elements_without_display_none agora deve conter todos os elementos dentro de #gallery que não tem display = none.

2

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .