Necesito obtener una barra de búsqueda que funcione para estas tarjetas (solo una incluida en el código para ahorrar espacio), el js que he estado usando funcionó bien por ahora, pero recientemente tuve que agregar un nuevo div (con clase sce-all) que hizo que buscara solo algunos de los elementos o en realidad demasiados de diferentes divs y hace que la otra información se muestre: ninguno cuando busco algo de div (con clase sce-e). Cuando trato de buscar cualquier cosa en este momento, también busca desde div (con clase sce-e), solo necesito que busque desde div (con clase sce-tt) o podría ser ambos, pero muestra lo siguiente: ninguna etiqueta actualmente. Intenté cambiar el ('.card div:nth-child(2)') en js, que es la causa del problema que parece. Gracias por cualquier ayuda
const searchEl = document.querySelector('.searchbox'); const x = document.querySelectorAll('.card div:nth-child(2)'); function search(e) { x.forEach((item, index) => { if (!item.innerHTML.toLowerCase().includes(e.target.value)) { item.parentElement.style.display = 'none'; } else { item.parentElement.style.display = 'block'; } }) } searchEl.addEventListener("keyup", search); <form class='searchbox'> <input class="searchbar" type="text" placeholder="Search.." name="search"> </form> <div class="main-container"> <div class="cards-vid"> <div class="video anim card"> <div class="video-wrapper"> <div class="video-wrapper-inside"> <a href="vid.mp4"><video preload="metadata"> <source src="vid.mp4#t=139" type="video/mp4"> </video></a> </div> </div> <div class="sce-all"> <div class="sce-e"><a href="none">Link Title</a><span class="length-t">0ms</span></div> <div class="sce-tt">Title</div> </div> <div class="tags-and-info"> <div class="tags"><a><span class="category-tag">Main</span></a><span class="language-edit"><a href="vid.mp4">ENG</a></span></div> <hr class="sce-hr"> <div class="sce-inf">Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span>2023</div> </div> </div> </div> </div>Cambie x para simplemente seleccionar los divs .sce-tt . Luego, cuando decida si ocultar o mostrar el padre, use el closest('.card') para encontrar la tarjeta que lo contiene, en lugar de especificar .parent .
const searchEl = document.querySelector('.searchbox'); const x = document.querySelectorAll('.card .sce-tt'); function search(e) { x.forEach((item, index) => { if (!item.innerHTML.toLowerCase().includes(e.target.value)) { item.closest(".card").style.display = 'none'; } else { item.closest(".card").style.display = 'block'; } }) } searchEl.addEventListener("keyup", search); <form class='searchbox'> <input class="searchbar" type="text" placeholder="Search.." name="search"> </form> <div class="main-container"> <div class="cards-vid"> <div class="video anim card"> <div class="video-wrapper"> <div class="video-wrapper-inside"> <a href="vid.mp4"><video preload="metadata"> <source src="vid.mp4#t=139" type="video/mp4"> </video></a> </div> </div> <div class="sce-all"> <div class="sce-e"><a href="none">Link Title</a><span class="length-t">0ms</span></div> <div class="sce-tt">Title</div> </div> <div class="tags-and-info"> <div class="tags"><a><span class="category-tag">Main</span></a><span class="language-edit"><a href="vid.mp4">ENG</a></span></div> <hr class="sce-hr"> <div class="sce-inf">Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span>2023</div> </div> </div> </div> </div>Puede usar closest() , con esto puede tener cualquier elemento como elemento secundario en bucle porque buscará el padre más cercano con clase/Id (en este caso .card ) que puso como parámetro, y como dije en mi comentario a su pregunta podría usar const x = document.querySelectorAll('.sce-tt') o const x = document.querySelectorAll('.sce-all')
const searchEl = document.querySelector(".searchbox"); const x = document.querySelectorAll(".sce-tt"); function search(e) { x.forEach( item => (item.closest(".card").style.display = !item.innerHTML .toLowerCase() .includes(e.target.value) ? "none" : "block") ); } searchEl.addEventListener("keyup", search); <form class="searchbox"> <input class="searchbar" type="text" placeholder="Search.." name="search" /> </form> <div class="main-container"> <div class="cards-vid"> <div class="video anim card"> <div class="video-wrapper"> </div> <div class="sce-all"> <div class="sce-e"> <a href="none">Link Title</a><span class="length-t">0ms</span> </div> <div class="sce-tt">Title</div> </div> <div class="tags-and-info"> <div class="tags"> <a><span class="category-tag">Main</span></a ><span class="language-edit"><a href="vid.mp4">ENG</a></span> </div> <hr class="sce-hr" /> <div class="sce-inf"> Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span >2023 </div> </div> </div> <div class="video anim card"> <div class="video-wrapper"> </div> <div class="sce-all"> <div class="sce-e"> <a href="none">Link test</a><span class="length-t">0ms</span> </div> <div class="sce-tt">test</div> </div> <div class="tags-and-info"> <div class="tags"> <a><span class="category-tag">Main</span></a ><span class="language-edit"><a href="vid.mp4">ENG</a></span> </div> <hr class="sce-hr" /> <div class="sce-inf"> Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span >2023 </div> </div> </div> </div> </div>