how can I count the elements display none of a div that inside has another div and inside there is an article with display: none

Navigation
1

I am trying to count the elements within a div and within that there is an article and some of those articles I have a display none, and whenever it has display none has the class tg-item-hidden, but I can not do it, it tells me that there are zero elements

I'll give you an example of how I try to do it 

var numElem = $('article.tg-item-hidden').size

alert(numElem);

I leave my html where I have problems 

<div id="grid-profesional">
<!-- The Grid Plugin Version 2.6.0 --><!-- The Grid Wrapper Start -->
<div class="tg-grid-wrapper tg-txt full-height tg-grid-loaded" id="grid-6966" data-version="2.6.0"><!-- The Grid Styles -->
  <div class="tg-grid-holder tg-layout-grid" style="left: -3px; width: 1425px; position: relative; height: 195px;">
    <!-- The Grid item #1 -->
    <article class="tg-item tg-post-1873 tg-profesional f111 f12 f8 f7 f110 f22 f45 f70 f40 tg-item-hidden" data-row="1" data-col="1" style="width: 195px; height: 195px; position: absolute; display: none;">
      <div class="tg-item-inner">
        <div class="tg-item-media-holder tg-light">
          <div class="tg-item-media-inner">
            <div class="tg-item-image" style="background-image: url(http://embajadorestec.com/wp-content/uploads/2017/10/a879cc_1081cca149a74525ad13b7cf759e331b~mv2_d_1538_1923_s_2-320x320.jpg)"></div>
          </div>
          <div class="tg-item-media-content ">
            <div class="tg-item-overlay"></div>
            <div class="tg-top-holder"><span class="tg-item-meta-data tg-element-1"><a target="_self" href="http://embajadorestec.com/usuario/juanpablosanchez/">NEGOCIOS</a></span><h2 class="tg-item-title tg-element-2"><a target="_self" href="http://embajadorestec.com/usuario/juanpablosanchez/">Juan Pablo Sánchez</a></h2></div><div class="tg-bottom-holder"><span class="tg-item-meta-data tg-element-5"><a target="_self" href="http://embajadorestec.com/usuario/juanpablosanchez/">Primer Semestre</a></span><span class="tg-item-meta-data tg-element-4"><a target="_self" href="http://embajadorestec.com/usuario/juanpablosanchez/">Hidalgo</a></span></div></div></div></div></article>
    <!-- The Grid item #2 -->
    <article class="tg-item tg-post-4704 tg-profesional f112 f12 f8 f7 f46 f110 f22 f47 f45 f70 f40" data-row="1" data-col="1" style="width: 195px; height: 195px; position: absolute; left: 0px; top: 0px; transition-property: opacity, transform; transition-duration: 2060ms;"><div class="tg-item-inner"><div class="tg-item-media-holder tg-light"><div class="tg-item-media-inner"><div class="tg-item-image" style="background-image: url(http://embajadorestec.com/wp-content/uploads/2018/02/Tiffany_Fondo_grid-320x320.jpg)"></div></div><div class="tg-item-media-content "><div class="tg-item-overlay"></div><div class="tg-top-holder"><span class="tg-item-meta-data tg-element-1"><a target="_self" href="http://embajadorestec.com/usuario/tiffany/">LAEt</a></span><h2 class="tg-item-title tg-element-2"><a target="_self" href="http://embajadorestec.com/usuario/tiffany/">Tiffany Thalia Corona</a></h2></div><div class="tg-bottom-holder"><span class="tg-item-meta-data tg-element-5"><a target="_self" href="http://embajadorestec.com/usuario/tiffany/">Sexto Semestre</a></span><span class="tg-item-meta-data tg-element-4"><a target="_self" href="http://embajadorestec.com/usuario/tiffany/">Hidalgo</a></span></div></div></div></div></article>
          <!-- The Grid item #3 --><article class="tg-item tg-post-4135 tg-profesional f112 f12 f107 f8 f7 f46 f110 f22 f70 f40 f50" data-row="1" data-col="1" style="width: 195px; height: 195px; position: absolute; left: 205px; top: 0px; transition-property: opacity, transform; transition-duration: 2060ms;"><div class="tg-item-inner"><div class="tg-item-media-holder tg-light"><div class="tg-item-media-inner"><div class="tg-item-image" style="background-image: url(http://embajadorestec.com/wp-content/uploads/2018/02/Ixchel_Fondo_grid-320x320.jpg)"></div></div><div class="tg-item-media-content "><div class="tg-item-overlay"></div><div class="tg-top-holder"><span class="tg-item-meta-data tg-element-1"><a target="_self" href="http://embajadorestec.com/usuario/ixchel/">LDP</a></span><h2 class="tg-item-title tg-element-2"><a target="_self" href="http://embajadorestec.com/usuario/ixchel/">Ixchel Alondra León</a></h2></div><div class="tg-bottom-holder"><span class="tg-item-meta-data tg-element-5"><a target="_self" href="http://embajadorestec.com/usuario/ixchel/">Segundo Semestre</a></span><span class="tg-item-meta-data tg-element-4"><a target="_self" href="http://embajadorestec.com/usuario/ixchel/">Hidalgo</a></span></div></div></div></div></article>
          <!-- The Grid item #4 --><article class="tg-item tg-post-4697 tg-profesional f112 f12 f8 f7 f46 f110 f22 f43 f70 f40 f48" data-row="1" data-col="1" style="width: 195px; height: 195px; position: absolute; left: 410px; top: 0px; transition-property: opacity, transform; transition-duration: 2060ms;"><div class="tg-item-inner"><div class="tg-item-media-holder tg-light"><div class="tg-item-media-inner"><div class="tg-item-image" style="background-image: url(http://embajadorestec.com/wp-content/uploads/2018/02/Kevin_Fondo_grid-320x320.jpg)"></div></div><div class="tg-item-media-content "><div class="tg-item-overlay"></div><div class="tg-top-holder"><span class="tg-item-meta-data tg-element-1"><a target="_self" href="http://embajadorestec.com/usuario/kevinbarrera/">ITIt</a></span><h2 class="tg-item-title tg-element-2"><a target="_self" href="http://embajadorestec.com/usuario/kevinbarrera/">Kevin Barrera</a></h2></div><div class="tg-bottom-holder"><span class="tg-item-meta-data tg-element-5"><a target="_self" href="http://embajadorestec.com/usuario/kevinbarrera/">Sexto Semestre</a></span><span class="tg-item-meta-data tg-element-4"><a target="_self" href="http://embajadorestec.com/usuario/kevinbarrera/">Hidalgo</a></span></div></div></div></div></article>
          <!-- The Grid item #5 --><article class="tg-item tg-post-1871 tg-profesional f111 f12 f8 f7 f110 f22 f45 f70 tg-item-hidden" data-row="1" data-col="1" style="width: 195px; height: 195px; position: absolute; display: none;"><div class="tg-item-inner"><div class="tg-item-media-holder tg-light"><div class="tg-item-media-inner"><div class="tg-item-image" style="background-image: url(http://embajadorestec.com/wp-content/uploads/2017/10/a879cc_45ac8bd3c7a847fc876717d363725a9f~mv2_d_1517_1896_s_2-320x320.jpg)"></div></div><div class="tg-item-media-content "><div class="tg-item-overlay"></div><div class="tg-top-holder"><span class="tg-item-meta-data tg-element-1"><a target="_self" href="http://embajadorestec.com/usuario/danielortega/">NEGOCIOS</a></span><h2 class="tg-item-title tg-element-2"><a target="_self" href="http://embajadorestec.com/usuario/danielortega/">Daniel Ortega</a></h2></div><div class="tg-bottom-holder"><span class="tg-item-meta-data tg-element-5"><a target="_self" href="http://embajadorestec.com/usuario/danielortega/">Primer Semestre</a></span><span class="tg-item-meta-data tg-element-4"><a target="_self" href="http://embajadorestec.com/usuario/danielortega/">Hidalgo</a></span></div></div></div></div></article></div></div><!-- The Grid Wrapper End --> 
</div>

This is the class that has the article that I have to tell: tg-item tg-post-1873 tg-profesional f111 f12 f8 f7 f110 f22 f45 f70 f40 tg-item-hidden

    
asked by Rodrigo Loy 06.03.2018 в 04:06
source

3 answers

1

To count the number of article elements that contain the class tg-item-hidden use the length attribute of the arrays 

var numElem =$('article.tg-item-hidden').length;
alert(numElem);
    
answered by 06.03.2018 / 04:36
source
1

Try with pure js to see, putting: 

var numElem = document.getElementsByClassName("tg-item-hidden").length;
    
answered by 06.03.2018 в 04:23
0

You can try this script: 

<script>
 $( window ).load(function() {
        var Elementosprofe =$('#grid-profesional article').length;
        var ElementosOcultosprofe =$('#grid-profesional article.tg-item-hidden').length;
        var totalprofe = Elementosprofe-ElementosOcultosprofe;
        if(totalprofe == 1 )
        {
           $("#grid-profesional").addClass("large-offset-5");
        }
        if(totalprofe == 2 )
        {
           $("#grid-profesional").addClass("large-offset-4");
        }
         if(totalprofe == 3 )
        {
           $("#grid-profesional").addClass("large-offset-3");
        }
         if(totalprofe == 4 )
        {
           $("#grid-profesional").addClass("large-offset-2");
        }
         if(totalprofe == 5 )
        {
           $("#grid-profesional").addClass("large-offset-1");
        }
         if(totalprofe == 6 )
        {
           $("#grid-profesional").addClass("large-offset-1");
        }
         var Elementosprepa =$('#grid-preparatoria article').length;
        var ElementosOcultosprepa =$('#grid-preparatoria article.tg-item-hidden').length;
        var totalprepa = Elementosprepa-ElementosOcultosprepa;
        if(totalprepa == 1 )
        {
           $("#grid-preparatoria").addClass("large-offset-5");
        }
         if(totalprepa == 2 )
        {
           $("#grid-preparatoria").addClass("large-offset-4");
        }
         if(totalprepa == 3 )
        {
           $("#grid-preparatoria").addClass("large-offset-3");
        }
          if(totalprepa == 4 )
        {
           $("#grid-preparatoria").addClass("large-offset-2");
        }
          if(totalprepa == 5 )
        {
           $("#grid-preparatoria").addClass("large-offset-1");
        }
          if(totalprepa == 6 )
        {
           $("#grid-preparatoria").addClass("large-offset-1");
        }

    });
  </script>
    
answered by 07.03.2018 в 15:37
Delete an item from a Collection Get a list of the mime-types supported on Android