如何统计<ul>标签中满足特定条件的<li>元素数量

当然有办法实现啦！结合你提到的this.props.value（看起来是在React场景下），我给你两种实用的解决方案：

1. React组件内优先：数据层面统计（更高效） #

既然你的列表是基于props数据渲染的，完全不用操作DOM——直接在数据源上统计才是React的最佳实践，避免不必要的DOM操作。比如：

// 假设你的props里有一个数组，用来渲染li元素
const { itemList } = this.props;

// 统计数组中值为true的元素数量
const trueItemCount = itemList.filter(item => item === true).length;

// 渲染列表
render() {
  return (
    <ul>
      {this.props.itemList.map((item, index) => (
        <li key={index}>{item.toString()}</li>
      ))}
    </ul>
  );
}

这样你直接就能拿到trueItemCount，不用去DOM里找，性能更好也更符合React的设计思路。

2. 直接操作DOM的场景（非React或特殊需求） #

如果确实需要从已渲染的DOM中统计，你可以把querySelectorAll返回的NodeList转成数组，再用filter过滤条件：

// 先获取所有ul下的li，转成数组后过滤内容为"true"的项
const trueLiCount = Array.from(document.querySelectorAll('ul > li'))
  .filter(li => li.textContent.trim() === 'true')
  .length;

• 用Array.from()把NodeList转为数组，这样就能使用数组的filter方法
• trim()是为了避免DOM文本中可能存在的空格、换行干扰判断
• 如果你的this.props.value渲染后不是纯字符串"true"（比如有其他格式），可以根据实际渲染结果调整过滤条件

内容的提问来源于stack exchange，提问作者YTG