时间戳

首页 > 解决方案 > 在我的 ul 列表中查找并分隔带有单词首字母的单词？

javascript - 在我的 ul 列表中查找并分隔带有单词首字母的单词？

问题描述

如何查找和分隔以特定字母开头的单词？我的英语不好。对不起。

我想通过使用“M”字母来找到“牛奶”和其他以 M 开头的单词，以便得到它。

代码是正确的，但我想将 Milk、Machine 和 Mercedes 的 x[2] 更改为 x[M]

function myFunction() {
  var x = document.getElementsByTagName("LI");
  document.getElementById("demo").innerHTML = x[2].innerHTML;
  
}
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Machine</li>
  <li>Mercedes</li>

</ul>

<p>Click the button to display the innerHTML of the second li element (index 1).</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

标签： javascriptjqueryhtml

解决方案

find如果未找到任何元素，您可以使用并设置默认值：

function myFunction() {
  var x = Array.from(document.getElementsByTagName("LI"));
  document.getElementById("demo").innerHTML = 
    (x.find(el => el.innerHTML.toLowerCase().startsWith('m')) || {innerHTML: 'No match'}).innerHTML;
  
}
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>Click the button to display the innerHTML of the second li element (index 1).</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

对于多个元素，请改用过滤器。下面是一个简单的搜索过滤器，演示了这一点。

document.getElementById('filter').addEventListener('click', () => {
  const {
    value
  } = document.getElementById('search');
  const resUl = document.querySelector('#demo');
  resUl.innerHTML = '';
  Array.from(document.getElementById('searchList').children).filter(e => e.innerText.toLowerCase().startsWith(value.toLowerCase()))
    .forEach(el => resUl.appendChild(el.cloneNode(true)));
});
<ul id="searchList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>



<input id="search" />
<button id="filter">Try it</button>


<ul id="demo"></ul>

推荐阅读