2

Estoy tratando de contar los elementos dentro de un div y dentro de ese hay un article y algunos de esos article tengo un display none, y siempre que tiene display none tiene la clase tg-item-hidden, pero no puedo hacerlo, me dice que hay cero elementos

les dejo un ejemplo de como trate de hacerlo

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

alert(numElem);

dejo mi html donde tengo problemas

<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>

esta es la clase que tiene el article que tengo que contar: tg-item tg-post-1873 tg-profesional f111 f12 f8 f7 f110 f22 f45 f70 f40 tg-item-hidden

11
  • 1
    Veo que las dos respuestas que han publicado son correctas y funcionan para el HTML propuesto, ¿acaso hay alguna condición como ajax que actualice el DOM?
    – Shaz
    Commented el 6 mar. 2018 a las 3:56
  • 1
    solo esta filtrado, muestra ciertos elementos dependiendo de la pagina en la que estes, como te digo , si c ambio cualquier clase que tenga ese article si me hace la contabilización excepto solo cuando uso la de hidden, ¿te paso la pagina del plugin o donde yo lo estoy utilizando? Commented el 6 mar. 2018 a las 4:03
  • 1
    Ya encontré cual es el plugin, y en efecto lo que hace es ocultar los elementos de la grilla por ajax, agregando la clase respectiva tg-item-hidden.
    – Shaz
    Commented el 6 mar. 2018 a las 4:04
  • 1
    si, y necesito esa clase para poder saber cuantos elementos hay visibles y cuales no para poder centrar el grid en medio, ya que dependiendo del numero de elementos es como se va a centrar. Commented el 6 mar. 2018 a las 4:06
  • 1
    ¿hay algún evento que active dicho conteo?
    – Shaz
    Commented el 6 mar. 2018 a las 4:09

3 respuestas 3

3

Para contar la cantidad de elementos article que contienen la clase tg-item-hidden utiliza el atributo length de los arreglos

var numElem =$('article.tg-item-hidden').length;
alert(numElem);
6
  • 1
    muchas gracias, pero tambien ya habia intentado ese metodo, pero me sigue saliendo en el alert 0 a pesar de que si estan ahi Commented el 6 mar. 2018 a las 3:38
  • 1
    Los article se agregan por medio de ajax? Puedes colocar ejemplos del html de esos articles Commented el 6 mar. 2018 a las 3:39
  • 1
    es un plug-in de wordpress de que llama un grid , de hecho lo extraño es que si utilizo alguna otra clase que tiene ese article si funciona excepto solo cuando quiero buscarlo por esa clase, y si necesito usar esa clase porque es la que me dice si esta oculta o no, o contarlo por medio de los display:none, pero tampoco me ha funcionado. te pongo un ejemplo , de como esta estructurado pero si sale super mal acomodado, ahi una disculpa Commented el 6 mar. 2018 a las 3:41
  • 1
    listo, ahi esta mi html Commented el 6 mar. 2018 a las 3:51
  • 1
    Prueba con $('#grid-profesional article.tg-item-hidden').length; Commented el 6 mar. 2018 a las 3:56
1

Prueba con js puro a ver, poniendo:

var numElem = document.getElementsByClassName("tg-item-hidden").length;
5
  • 1
    muchas gracias, lamentablemente me sale que son 0 elementos aun :( Commented el 6 mar. 2018 a las 3:29
  • 1
    no aun no se puede :( Commented el 6 mar. 2018 a las 3:58
  • 1
    Entonces debe ser de otra cosa, porque eso no deberia fallar
    – ivanao
    Commented el 6 mar. 2018 a las 4:00
  • 1
    creo que es porque se agrega esa clase por medio de ajax ¿sabes como puedo hacer uso de esa clase aunque fue agregada por ajax? Commented el 6 mar. 2018 a las 4:28
  • Pon el resto del codigo a ver
    – ivanao
    Commented el 7 mar. 2018 a las 0:26
1

Puedes intentar con este 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>
1
  • 1
    Podrias explicar más como llegaste a esta solución para que sea aceptada tu respuesta Commented el 7 mar. 2018 a las 14:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.