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

Question

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

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

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

The function to calculate and add would be this:

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

But in this way it takes all the elements inside div#gallery and I only want what does not have display:none set as attribute inline .

Any ideas?

javascript jquery

asked by anonymous 18.07.2016 / 02:31

2 answers

PHP - pushing array into another array error: initializer element is not constant

score 2 · Answer 1

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 does not have display = none.

score 2 · Answer 2

Selecting what is visible

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 it's more comprehensive and probably more useful.

See 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><divid="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 are no selectors for CSS attributes in the same way that they exist for HTML attributes.

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

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

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><divid="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 there are no blanks in inline value, use a single :not([style*="display:none"]) selector.

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