He creado las tarjetas de menú utilizando las entradas del usuario. En las tarjetas, quiero filtrar las tarjetas usando su nombre de plato y mostrar = 'ninguna' las otras tarjetas. El filtrado debe ocurrir cuando se hace clic en el botón de filtro. Mi código está abajo. Reiteré las tarjetas usando for loop. Pero quiero hacerlo por el método de filtro y sin usar for loop.
const breakfastBtn = document.querySelector('.breakfast-btn'); breakfastBtn.addEventListener('click', filterBreakFast); function filterBreakFast(){ let type = cardsContainer.querySelectorAll('.card-length') for ( let i = 0; i < type.length; i++ ) { let span = type[i].querySelector('.card-dish-type'); if ( span.innerHTML.indexOf('Brunch') > -1 ) { type[i].style.display = "initial"; } else { type[i].style.display = "none"; } } }👋 Para el código que ya funciona y que le gustaría revisar, es posible que encuentre una mejor respuesta en la revisión del código .
Si su única intención es evitar el uso de un bucle for , este es un ejemplo de su código reescrito con métodos de matriz. El método .filter probablemente no sea lo que está buscando en este caso. .filter devuelve otra matriz filtrada en función de una función. Lo que parece que pretende hacer es aplicar dos acciones diferentes en función de si el html de un elemento incluye o no la cadena "Brunch".
Podemos usar el método de matriz .forEach en lugar de un bucle for... in , aunque es principalmente un cambio de estilo.
const breakfastBtn = document.querySelector('.breakfast-btn'); breakfastBtn.addEventListener('click', filterBreakFast); function filterBreakFast() { const type = cardsContainer.querySelectorAll('.card-length'); type.forEach(element => { const span = element.querySelector(".card-dish-type"); const hasBrunch = span.innerHTML.includes("Brunch"); if (hasBrunch) { element.style.display = "initial"; } else { element.style.display = "none"; } }); }