1

Tengo un div con el id "Padre" y dentro tengo muchos elementos repartidos en distintos niveles de jerarquia, pero todos esos elementos tienen la clase "hijo".

Aclaro, lo necesito de esta forma porque los elementos dentro de la clase padre se crearán con Ajax, y lo que necesito es añadirle cosas a esas clases, pero como son elementos nuevos un simple querySelectorAll(".hijos") no lo captura ya que esos elementos no existen al cargar la pagina, por lo que quiero mediante un elemento padre que nunca cambia seleccionarlos nuevamente para añadirle eventos a esas clases

¿Como podria seleccionar a todos los hijos de ese padre?

<div class="padre">
        <div class="alt">
            <div class="uno">
                <div class="hijo"></div>
                <div class="dos">
                    <div class="hijo"></div>
                </div>
            </div>
        </div>
        <div class="alt">
            <div class="tres">
                <div class="cuatro">
                    <div class="cinco">
                        <div class="hijo"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hijo">
        </div>
    </div>

Esto obvio con JS o Jquery.

2
  • Hola, la forma mas rapida es con algo asi: ``` const $hijos = document.querySelectorAll(".hijo") ``` Te va a devolver un array con todas las divs con clase "hijo" Es eso lo que buscabas?
    – Carlos
    el 5 dic. 2022 a las 21:04
  • utilizando querySelectorAll('.padre .hijo'); o también puedes utilizar getElementsByClassName('.padre .hijo'); el 5 dic. 2022 a las 21:04

1 respuesta 1

0

Estás usando una CLASE padre, no un ID, como indicaste en tu problema, si lo que quieres es específicamente retornar los hijos que están dentro de un identificador padre, puedes usar alguna función que reviste todos los hijos y los guarde dentro de un arreglo, no sé si exista una forma más sencilla de hacerlo, pero esto es lo que se me ocurrió a mí

const myElement = document.getElementById('padre');

const hijosArray = []

findHijos(myElement.children)

console.log(hijosArray.length)

function findHijos(childrenArray){
    for (const element of childrenArray) {
    if(element.className === "hijo"){
        hijosArray.push(element)
    }
    if(element.children.length > 0){
        findHijos(element.children)
    }
  }
}
<div id="padre">
        <div class="alt">
            <div class="uno">
                <div class="hijo"></div>
                <div class="dos">
                    <div class="hijo"></div>
                </div>
            </div>
        </div>
        <div class="alt">
            <div class="tres">
                <div class="cuatro">
                    <div class="cinco">
                        <div class="hijo"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hijo">
        </div>
    </div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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