0

Tengo tres div:

 <div class="global">

        <div class="content">

        </div>
</div>

<div class="global">

        <div class="content">
            <div class="imagen"></div>
        </div>
</div>

<div class="global">

        <div class="content">
            <div class="resumen anchuraTotal"></div>
        </div>
   </div>

si en content no hay nada quiero que pinte los div imagen y resumen. Si está la imagen pero falta el resumen, quiero que pinte el resumen. Cuando está el resumen pero falta la imagen, por defecto inserta la clase "anchuraTotal". Tiene que quitar la clase anchura total, dejando la clase "resumen" y además insertar la imagen de nuevo dentro del content. Al final todos deben quedar así:

<div class="content">
    <div class="imagen"></div>
    <div class="resumen"></div>
</div>

Cuando no hay nada, consigo pintar, pero en el resto, no sé como condicionarlo porque cuando no falla uno, falla otro. Todo lo que encuentro es con jQuery y necesito que sea javascript puro.

Ayuda por favor!!

function insertCourseListContent () {

var globalBoxes = document.getElementsByClassName("global");
var resumenDiv= document.getElementsByClassName("resumen anchuraTotal")[0];
var imagenDiv = document.getElementsByClassName("imagen")[0];

for (var i = 0; i < globalBoxes.length; i++) {

    var contentDiv = document.getElementsByClassName("content")[i];

    if (contentDiv.childElementCount < 1) {

        var resumenDiv= document.createElement("div");
        resumenDiv.setAttribute("class", "resumen");

        contentDiv.appendChild(resumenDiv);

        var imagenDiv = document.createElement("div");
        imagenDiv.setAttribute("class", "imagen");
        contentDiv.appendChild(imagenDiv);

    }
    else if (contentDiv.childElementCount == 1 && contentDiv.children[0] == resumenDiv) {

        for (var j = 0; j < resumenDiv.length; j++) {

            var anchuraTotalClase= document.getElementsByClassName("resumen anchuraTotal")[j];
            if (anchuraTotalClase!== undefined){
                anchuraTotalClase.classList.remove("anchuraTotal");
                var imagenDiv= document.createElement("div");
                imagenDiv.setAttribute("class", "imagen");
                contentDiv.appendChild(imagenDiv);

            }

        }

    }else if (contentDiv.childElementCount == 1 && contentDiv.children[0] == imagenDiv) {
        var resumenyDiv = document.createElement("div");
        resumenDiv.setAttribute("class", "resumen");

        contentDiv.appendChild(resumenDiv);

    }

}

}

7
  • ¿Has intentando algo? ¿Qué error tienes?
    – A. Cedano
    el 9 oct. 2019 a las 18:44
  • No tengo errores. Simplemente, no hace lo que quiero. el 10 oct. 2019 a las 7:32
  • He editado la pregunta. Me gustaría comprobar si dentro de cada "content" existe una clase u otra. la que no exista, la tiene que crear. Y si existe "anchuraTotal, la tiene que eliminar... el 10 oct. 2019 a las 7:55
  • 1
    Ya está solucionado. He utilizado querySelector. if (!contentDiv.querySelector(".resumen") && !contentDiv.querySelector(".imagen")). Luego publico la solución Gracias!! el 10 oct. 2019 a las 8:44
  • @JorgeGarcíaCano creo que puedes dejar la respuesta abierta por si alguien le interesa hallar una solución simplificando el código. el 10 oct. 2019 a las 11:21

1 respuesta 1

0

Esto es lo que he hecho y funciona. Si alguien quiere aportar se agradece. Muchas gracias como siempre!!!

var resumenDiv= document.getElementsByClassName("resumen anchuraTotal");
var imagenDiv = document.getElementsByClassName("imagen");
var globalBoxes = document.getElementsByClassName("global")[0];

for (var i = 0; i < globalBoxes.children.length; i++) {

  var contentDiv = document.getElementsByClassName("content")[i];

    if (!contentDiv.querySelector(".resumen") && !contentDiv.querySelector(".imagen")){

                var resumenDiv = document.createElement("div");
                resumenDiv.setAttribute("class", "resumen");
                contentDiv.appendChild(resumenDiv);
                var imagenDiv = document.createElement("div");
                imagenDiv.setAttribute("class", "imagen");
                contentDiv.appendChild(imagenDiv);

    }
    else if (!contentDiv.querySelector(".resumen") && contentDiv.querySelector(".imagen"))
    {
                 var resumenDiv = document.createElement("div");
                 resumenDiv.setAttribute("class", "resumen");
                 contentDiv.appendChild(resumenDiv);

     }
     else if (contentDiv.querySelector(".resumen") && !contentDiv.querySelector(".imagen")) 
     {
                 var anchuraTotalClase= document.getElementsByClassName("resumen anchuraTotal")[0];

                 if (anchuraTotal!== undefined){

                     anchuraTotalClase.classList.remove("anchuraTotal");
                     var imagenDiv= document.createElement("div");
                     imagenDiv.setAttribute("class", "imagen");
                     contentDiv.appendChild(imagenDiv);
                  }
      }

}

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.