How to get and count elements that DO NOT have a certain CSS property with js/jquery?

Question

I need to count elements within a div that does not contain the property display:none and then calculate and add up the width of all these elements.

The function of calculating and summing would be this:

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

But that way she gets all the elements inside div#gallery and I just want what I don’t own display:none set as attribute inline.

Any idea?

Answer 1

Selecting what is visible

The jQuery has a special selector :visible that selects all elements that occupy some space in the document. It’s not exactly your requirement on display:none, but is more comprehensive and probably more useful.

Take an example:

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>

Denying a CSS attribute

There is no selector for CSS attributes in the same way as there is for HTML attributes.

An alternative that works if you have full control over the styles and they are inline is select by text comparison.

The following example uses a double dial :not([style*="display"]), :not([style*="none"]), that is, he looks for both values display and none within the attribute style in HTML. This nay function if the attribute is declared elsewhere or dynamically changed.

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>

Alternatively, if you have full control over the styles and ensure that there are no whitespaces in the value inline is to use a single selector :not([style*="display:none"]).

However, I would consider these gambiarras techniques. It would be better to use the :visible jQuery or, even better, if you have control over the process, add different classes in the elements that are visible and invisible, so it becomes much simpler to perform operations on these elements without gambiarras.

Answer 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 should now contain all elements within #gallery that has no display = None.