JS统计列表项数量：代码问题排查及纯JS实现咨询

咱们先拆解下你代码里的核心问题：

• 计数器变量（pCounter、sCounter等）被放在了each循环内部，每次循环迭代都会重置为0，根本没法累计统计数量；
• 用了错误的has()方法——这个方法是用来判断元素是否包含指定子元素/选择器的，完全不是用来检测文本内容的，这直接导致你的判断逻辑失效。

修复后的jQuery代码 #

var allLi = $("#lists ol li");
var allLip = $("#all-li");
var numP = $("#num-p");
var numS = $("#num-s");
var numP12 = $("#num-p-12");

var pText = "(p)";
var sText = "(s)";
var p12Text = "(p-12)";

// 统计所有li数量
allLip.text(allLi.length);

// 把计数器放在循环外，才能实现累计
var pCounter = 0;
var sCounter = 0;
var p12Counter = 0;

allLi.each(function(){
    const liText = $(this).text();
    if(liText.includes(pText)){
        pCounter++;
    }
    if(liText.includes(sText)){
        sCounter++;
    }
    if(liText.includes(p12Text)){
        p12Counter++;
    }
});

// 循环结束后统一更新DOM，比每次循环更新性能更好
numP.text(pCounter);
numS.text(sCounter);
numP12.text(p12Counter);

纯JavaScript实现版本 #

当然可以用纯JS实现，逻辑和jQuery版本一致，只是用原生API操作：

const allLi = document.querySelectorAll("#lists ol li");
const allLip = document.getElementById("all-li");
const numP = document.getElementById("num-p");
const numS = document.getElementById("num-s");
const numP12 = document.getElementById("num-p-12");

const pText = "(p)";
const sText = "(s)";
const p12Text = "(p-12)";

// 统计所有li数量
allLip.textContent = allLi.length;

let pCounter = 0;
let sCounter = 0;
let p12Counter = 0;

allLi.forEach(li => {
    const liText = li.textContent;
    if(liText.includes(pText)) pCounter++;
    if(liText.includes(sText)) sCounter++;
    if(liText.includes(p12Text)) p12Counter++;
});

// 更新统计结果
numP.textContent = pCounter;
numS.textContent = sCounter;
numP12.textContent = p12Counter;

小提示：如果担心(p-12)被(p)的判断误触发，可以调整判断顺序——先判断长文本（比如先检测(p-12)），再判断短文本，避免重复计数。

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