Estoy revisando dos divs diferentes después de un setTimeOut de 2 segundos para ver si contienen un iFrame o no. Si no lo hacen, simplemente configuro su visualización en ninguno para ocultarlos. Es importante que estos dos divs nunca existan juntos en una página. Ahora puse el siguiente código y funciona bien:
let divOne = document.querySelector('.div-one') if (divOne) { setTimeout(() => { let divOneIframe = divOne.querySelector("iframe") if (!divOneIframe) { divOne.style["display"] = "none"; } }, 2000) } let divTow = document.querySelector('.div-two') if (divTow) { setTimeout(() => { let divTwoIframe = divTow.querySelector("iframe") if (!divTwoIframe) { divTow.style["display"] = "none"; } }, 2000) }Pero no me parece correcto tener que separar setTimeOut para ello.
¿Cómo puedo fusionar estos dos bloques de códigos para terminar usando setTimeOut solo una vez?
Iterar sobre una matriz de esos posibles selectores funcionaría.
const div = ['.div-one', '.div-two'] .map(sel => document.querySelector(sel)) .find(Boolean); if (div) { setTimeout(() => { const iframe = div.querySelector('iframe'); if (!iframe) { div.style.display = 'none'; } }, 2000); }Con encadenamiento opcional:
Otro enfoque sería dar a .div-one y .div-two su propio selector en común, por ejemplo, tener <div class="div-one contains-iframe"> y <div class="div-two contains-iframe"> para que solo tengas que seleccionar .contains-iframe en lugar de iterar.