顯示li包含一個特定的字串并隱藏誰不包含

我需要隱藏每個不以“胭脂”結尾的li 。這意味著在此串列中只能顯示“Fruits rouges”和“Haricots rouges”，因為它以“rouges”結尾。此事件必須通過單擊按鈕發生，并且必須僅在 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>

然后，僅當使用了上述過濾器時，我才需要單擊另一個按鈕來重置此串列（顯示每個 li），并按字母順序對其進行排序。

我已經嘗試通過以下方式找到匹配的單詞“胭脂”：

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);

});

但它沒有考慮必須在最后的“胭脂”的位置。

我希望你能幫助我做到這一點，因為我已經困惑了好幾個小時了，哈哈，非常感謝。

uj5u.com熱心網友回復：

有一些步驟可以到達那里，僅使用endsWith不是解決方案：

1- 您需要從 DOM 中提取所有專案，它們是您的代碼作業的真實來源。

2 - 將 HTMLcollection 決議為陣列

3 - 選擇以 'rouges' 結尾的 itens

4 - 最后，您必須設定一種不顯示不以“胭脂”結尾的方式

我的方法如下：

    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>

uj5u.com熱心網友回復：

愿正則運算式的力量與你同在：

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);

uj5u.com熱心網友回復：

您可以使用endsWith函式來獲取僅以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>

標籤：javascript 数组 列表 筛选 包括

上一篇：如何在創建表時在動態創建的Select中設定Option元素的值

下一篇：移動已經用JavaScript創建的按鈕