Necesito esconder cada li que no termine con "rouges" . Lo que significa que en esta lista solo se pueden mostrar "Fruits rouges" y "Haricots rouges" porque termina con "rouges". Este evento tiene que ocurrir haciendo clic en un botón, y tiene que ser solo en JS...
<ul> <li>Fruits rouges</li> <li>Raisins blanc</li> <li>Pomme verte</li> <li>Haricots verts</li> <li>Haricots rouges</li> <li>Rouges gorges</li> <li>Fruits exotiques rouges et verts</li> </ul>
Luego, debo hacer clic en otro botón para restablecer esta lista (mostrar cada li) solo si se ha utilizado el filtro anterior y ordenarlo alfabéticamente.
Ya he intentado encontrar la palabra correspondiente "rouges" haciendo:
document.getElementById("bouton4").addEventListener("click", function(){ const items = ['Fruits rouges', 'Raisins blanc', 'Pomme verte', 'Haricots verts', 'Haricots rouges', 'Rouges gorges', 'Fruits exotiques rouges et verts']; const matches = items.filter(s => s.includes('rouges')); console.log(matches); });
Pero no tiene en cuenta la posición de "rouges" que debe estar al final.
Espero que me puedan ayudar a hacer eso porque he estado dándole vueltas a eso durante bastantes horas jajaja, muchas gracias.
Hay algunos pasos para llegar allí, usar solo extremos con no es una solución:
1- Debe extraer todos los elementos del DOM, son la fuente de verdad para que su código funcione.
2 - Analizar la colección HTML en una matriz
3 - Seleccione los artículos que terminen en 'rouges'
4 - Finalmente, debe establecer una forma de no mostrar aquellos que no terminan con 'rouges'
Mi enfoque es el siguiente:
document.getElementById("bouton4").addEventListener("click", function () { const itens = document.getElementsByTagName('li') const arr = [].slice.call(itens); const endsWithRouges = arr.map(li => li.innerHTML.endsWith('rouges')); endsWithRouges.forEach((e, i) => { if (!e) itens.item(i).style.display = 'none'; }) });
<ul> <li>Fruits rouges</li> <li>Raisins blanc</li> <li>Pomme verte</li> <li>Haricots verts</li> <li>Haricots rouges</li> <li>Rouges gorges</li> <li>Fruits exotiques rouges et verts</li> </ul> <button id="bouton4">Hide not rouges</button>
Que la fuerza de las expresiones regulares te acompañe:
const items = [ 'Fruits rouges', 'Raisins blanc', 'Pomme verte', 'Haricots verts', 'Haricots rouges', 'Rouges gorges', 'Fruits exotiques rouges et verts' ]; const matches = items.filter(s => /rouges$/.test(s)); console.log(matches);
Puede usar la función endsWith
para obtener los elementos que solo terminan con rouges
const ul = document.querySelector("ul"); const items = [ 'Fruits rouges', 'Raisins blanc', 'Pomme verte', 'Haricots verts', 'Haricots rouges', 'Rouges gorges', 'Fruits exotiques rouges et verts' ]; function render(arr) { ul.innerHTML = ""; arr.forEach(list => { const li = document.createElement("li"); li.textContent = list; ul.appendChild(li); }) } let isFiltered = false; document.getElementById("bouton4").addEventListener("click", function() { const matches = items.filter(s => s.endsWith('rouges')); console.log(matches); render(matches); isFiltered = true; }); document.querySelector("#bouton5").addEventListener("click", () => { if (isFiltered) { render([...items].sort((a, b) => a.localeCompare(b))) } }) document.querySelector("#bouton6").addEventListener("click", () => { render(items) })
<button id="bouton4"> filter ends with rouges</button> <button id="bouton5"> reset with sorting</button> <button id="bouton6"> reset </button> <ul> <li>Fruits rouges</li> <li>Raisins blanc</li> <li>Pomme verte</li> <li>Haricots verts</li> <li>Haricots rouges</li> <li>Rouges gorges</li> <li>Fruits exotiques rouges et verts</li> </ul>