Question

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

我想通过使用“ 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>

Answer 1

如果未找到任何元素，则可以使用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>

Answer 2

使用findIndex-您还需要将x转换为数组。

function myFunction() {
  var x = [...document.getElementsByTagName("LI")];
  document.getElementById("demo").innerHTML = x[x.findIndex(e => e.innerHTML[0] == "M")].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>

Answer 3

您可以使用jQuery获取所有列表项，然后.filter()删除.startsWith()所需字符的列表项。

var prefix = "M";
$('#btn').click(function() {
  var $listItems = $("ul > li");
  var found = $listItems.filter(function() {
    return $(this).text().startsWith(prefix);
  }).clone().get();

  $("#demo").html(found);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Mercedes</li>
  <li>Chocolate</li>
</ul>

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

<button id="btn">Try it</button>

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

在ul列表中以单词的首字母查找和分隔单词？

3 个答案: