Clase principal: cmp-container Hay dos clases secundarias: productmodelfootnotes footnotes
De acuerdo con la secuencia del niño, quiero dar relleno de la siguiente manera: si la clase secundaria "productmodelfootnotes" viene primero -> Aplicar relleno = 40px a la clase principal (cmp-container) Si la clase secundaria "notas al pie" viene primero -> Aplicar relleno =64px a la clase principal (cmp-container)
En primer lugar, inicialice su elemento principal
let parent = document.querySelector('.cmp-container')Luego agregue estilo, según la condición
let firstChild = parent.children[0]; if(firstChild.classlist.contains('productmodelfootnotes'){ parent.style.padding = "40px"; } else if(firstChild.classlist.contains('footnotes')) { parent.style.padding = "64px"; }Considera lo siguiente.
$(function() { $(".cmp-container").each(function(i, el) { if ($("div:eq(0)", el).hasClass("productmodelfootnotes")) { $(el).addClass("shortpad"); } else if ($("div:eq(0)", el).hasClass("footnotes")) { $(el).addClass("longpad"); } }); }); .cmp-container { border: 1px solid blue; margin-bottom: -1px; } .cmp-container .footnotes { border: 1px solid red; } .cmp-container .productmodelfootnotes { border: 1px solid green; } .shortpad { padding: 40px; } .longpad { padding: 64px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cmp-container"> <div class="productmodelfootnotes"> Product Note 1 </div> <div class="footnotes"> Foot Note 1 </div> </div> <div class="cmp-container"> <div class="footnotes"> Foot Note 2 </div> </div> <div class="cmp-container"> <div class="productmodelfootnotes"> Product Note 3 </div> <div class="footnotes"> Foot Note 3 </div> </div> <div class="cmp-container"> <div class="footnotes"> Foot Note 4 </div> <div class="productmodelfootnotes"> Product Note 4 </div> </div> Usando .each() , podemos iterar sobre los elementos DIV y verificar el orden de los elementos secundarios. Si cumplen la condición específica, podemos agregar una Clase o aplicar un Estilo a ese elemento.
Ver más: https://api.jquery.com/each/
Asigno i como Índice y el como Elemento. Luego uso un selector de búsqueda, $("div:eq(0)", el) que es lo mismo que $(el).find("div").eq(0) donde 0 representa el primer elemento de la lista o elementos que se encuentra.
Usando .hasClass() podemos verificar si es true o false y realizar una acción específica según la condición.
Ver más: https://api.jquery.com/hasClass/
Usé una declaración if / else if para verificar dos condiciones. Esto es en caso de que pueda aparecer otro elemento primero que no debería tener ningún relleno.