Estoy tratando de ocultar una sección deslizante elegante si no tiene diapositivas. He probado toneladas de opciones diferentes, como tratar de usar PHP y CSS, pero siento que estoy más cerca de hacer que funcione con jQuery.
La estructura de salida HTML es:
<div class="container-flex type-testimonials-container"> <div class="container"> <div class="container type-testimonials slick-initialized slick-slider"> <div class="slick-list draggable"> <div class="slick-track"> <div class="slick-slide"> SINGLE SLIDE CONTENT </div> <div class="slick-slide"> SINGLE SLIDE CONTENT </div> <div class="slick-slide"> SINGLE SLIDE CONTENT </div> </div> </div> </div> </div> </div>Entonces, estoy pensando que puedo usar jQuery para ocultar el div contenedor (.type-testimonials-container) si el div de una sola diapositiva (.slick-slide) no existe.
He probado lo siguiente:
if(jQuery(".slick-slide").html().length) { jQuery(".type-testimonials-container").hide(); }Además de muchas variaciones de eso... Creo que podría deberse a que los dos divs no están en el mismo nivel y uno contiene al otro, pero tratar de encontrar una forma de hacerlo padre/hijo está resultando difícil... No estoy seguro de qué camino tomar...
¡Cualquier ayuda sería enormemente apreciada!
EDITAR *
También intenté verificar la relación entre padres e hijos y tratar de esperar hasta que se haya cargado el DOM, así:
document.addEventListener("DOMContentLoaded", function(event) { var parentDiv = document.getElementsByClassName("slick-track"); var childDiv = document.getElementsByClassName("slick-slide"); if (parentDiv.contains(childDiv)) { alert("div DOES exist"); } else{ alert("div DOES NOT exist"); } });Pero esto solo me muestra la alerta NO existe a pesar de que existe. ¿Esto lo buscará en todo el DOM? ¿O necesito proporcionar la ruta exacta del div desde el cuerpo o algo así?
¿Por qué no simplemente consultar la longitud de la colección HTML de .slick-slide ? JQ aún devolverá un objeto si el elemento de destino no existe, y el objeto tendrá una propiedad length . Algo como
if(jQuery(".slick-slide").length === 0) { jQuery(".type-testimonials-container").hide(); }Logré hacerlo de esta manera:
jQuery(document).ready(function() { if(jQuery('.slick-slide').length){ jQuery('.type-testimonials-container').show(); } else { jQuery('.type-testimonials-container').hide(); } });