1 <div class="mnr-c xpd O9g5cc uUPGi"> 2 <div> 3 <div class="mnr-c xpd O9g5cc uUPGi">someting</div> 4 </div> 5 <div> 6 <div class="mnr-c xpd O9g5cc uUPGi">someting</div> 7 </div> 8 </div> 9 <div class="mnr-c xpd O9g5cc uUPGi">someting</div> 10 Tengo una estructura HTML como la anterior. Solo quiero seleccionar elementos secundarios usando selectores de CSS, pero los padres y los niños tienen las mismas clases. Si trato de seleccionar usando jquery por ejemplo $$(".mnr-c.xpd.O9g5cc.uUPGi").forEach(el => console.log(el)) ese método muestra 4 resultados pero solo quiero ver 3 resultado. Las líneas 1, 9 y 11 están en el mismo nivel. Mi propósito es tomar las líneas 3, 6 y 9. Cómo puedo evitar seleccionar un elemento principal. ¿Es posible algo como esto simplemente usando CSS o jquery?
si todo lo que quiere son los niños, entonces puede seleccionar a través del selector de niños > , así $(".mnr-c.xpd.O9g5cc.uUPGi > .mnr-c.xpd.O9g5cc.uUPGi") .
si desea que todos los descendientes del elemento tengan la misma clase, puede usar el combinador descendiente (espacio vacío), así $(".mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi") .
CSS no tiene una opción para verificar el contenido (según esta respuesta )
Con jquery, puede seleccionar los elementos que son hijos, luego obtener sus padres y excluirlos:
var parents = $(".xpd .xpd").parents(".xpd") var selection = $(".xpd").not(parents) Tenga en cuenta que debe ser .xpd .xpd y no .xpd > .xpd ya que hay un div entre los dos niveles, por lo que no son "hijos"
Donación:
var sel = $(".xpd").not($(".xpd .xpd").parents(".xpd")) console.log(sel.length) sel.each((i,e) => console.log(e)) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mnr-c xpd O9g5cc uUPGi"> <div> <div class="mnr-c xpd O9g5cc uUPGi">something 1</div> </div> <div> <div class="mnr-c xpd O9g5cc uUPGi">something 2</div> </div> </div> <div class="mnr-c xpd O9g5cc uUPGi">something 3</div>Utilice un combinador descendiente:
$(".mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi").forEach(el => console.log(el)); .mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi { border: 2px dotted red; }