如何检查 ul 是否有给定文本的 li？

在 HTML 中，ul 元素通常用于表示无序列表，而 li 元素则表示列表的一个项目。在某些情况下，需要检查一个 ul 元素中是否包含某些文本的 li 元素，本文将介绍两种方法来实现此功能。

方法一：使用 jQuery

如果在项目中使用了 jQuery 库，可以使用该库提供的一些方法来查找 ul 下面的 li 元素是否包含指定文本。

下面是一个基本的例子：

// 获取要检查的文本
var searchText = "important";

// 遍历每个 li 元素
$('ul li').each(function() {
  // 判断该 li 元素中是否包含要检查的文本
  if ($(this).text().indexOf(searchText) != -1) {
    // 如果包含，则输出该 li 元素的内容
    console.log($(this).text());
  }
});

上述代码会输出所有包含 "important" 的 li 元素的文本内容。如果搜索的文本只有一个匹配项，可以使用 :contains() 选择器来更方便地找到对应的元素：

$('ul li:contains("important")').text();

此方法十分便捷，但只有在项目中已经使用了 jQuery 库的情况下才能使用。

方法二：使用原生 JavaScript

如果项目不依赖于 jQuery 等库，可以使用原生 JavaScript 来实现同样的功能。

下面是一个示例代码：

// 获取要检查的文本
var searchText = "important";

// 获取所有的 li 元素
var listItems = document.getElementsByTagName("li");

// 遍历每个 li 元素
for (var i = 0; i < listItems.length; i++) {
  // 判断该 li 元素中是否包含要检查的文本
  if (listItems[i].textContent.indexOf(searchText) != -1) {
    // 如果包含，则输出该 li 元素的文本内容
    console.log(listItems[i].textContent);
  }
}

此方法基于原生 JavaScript，因此在不依赖于任何库的项目中都可以使用。

总结

在本文中，我们介绍了两种检查 ul 元素是否包含指定文本的 li 元素的方法。第一种方法使用了 jQuery 库，依赖于该库的存在；第二种方法则基于原生 JavaScript，可在任何项目中使用。