const slidesLength = slideRight.querySelectorAll('div').length / 2; <div class="right-slide"> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic1.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic2.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic3.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic4.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic5.jpg);"></div> </div> </div>Estoy tratando de enfocarme en lo más interno usando querySelectorAll(), pero no estoy seguro de cómo hacerlo. Con el código JS que tengo ahora, puedo obtener la cantidad exacta de divs que quiero, pero solo usando un método diferente. Me preguntaba si hay una forma de ignorar los divs con color de fondo y obtener solo los que tienen una imagen de fondo.
Sí, document.querySelectorAll('.right-slide div[style*=background-image]') obtendrá una lista de todos los divs dentro de .right-slide que tienen una background-image como un estilo en línea
const bgImageDivs = document.querySelectorAll('.right-slide div[style*=background-image]'); console.log(bgImageDivs) <div class="right-slide"> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic1.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic2.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic3.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic4.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic5.jpg);"></div> </div> </div>Puede usar un bucle for para verificar si el div tiene background-image o no.
let div = document.querySelectorAll('div'); let num =0; for(let i =0;i<div.length;i++){ if(div[i].style.backgroundImage !=='') num++ } console.log(num) <div class="right-slide"> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic1.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic2.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic3.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic4.jpg);"></div> </div> <div style="background-color: #773f47bd"> <div style="background-image: url(/pic5.jpg);"></div> </div> </div>