如何识别多个UL列表中属性相同的LI元素并定位？

核心思路 #

按索引遍历每个LI的位置，收集所有列表中对应位置LI的data-attr值，通过判断这些值是否完全一致，来定位符合要求的LI元素。

代码实现 #

// 获取所有目标UL列表
const ulLists = document.querySelectorAll('ul');
// 取第一个UL的LI数量（已知所有UL行数相同）
const totalLiItems = ulLists[0].querySelectorAll('li').length;

// 遍历每个LI的位置索引
for (let index = 0; index < totalLiItems; index++) {
    // 收集当前索引下，所有UL中对应LI的data-attr值
    const attrValues = Array.from(ulLists).map(ul => {
        return ul.querySelectorAll('li')[index].dataset.attr;
    });
    
    // 判断所有值是否完全一致：用Set去重后长度为1则说明全部相同
    const isAllSameAttr = new Set(attrValues).size === 1;
    
    if (isAllSameAttr) {
        // 定位这些LI，示例为添加高亮类
        Array.from(ulLists).forEach(ul => {
            const targetLi = ul.querySelectorAll('li')[index];
            targetLi.classList.add('matched-item');
            // 可根据需求替换为其他定位操作，比如打印、修改样式等
        });
    }
}

问题排查说明 #

你之前用if/else出现结果相反的情况，大概率是逻辑判断写反了：比如原本要判断「所有属性值相同」才处理，但误写成了「存在不同属性值」就处理。上面的代码通过Set(attrValues).size === 1精准判断所有值一致，能避免这个逻辑错误。

对应你提到的场景：

• data-attr="fax"的LI在对应位置上所有值都相同，Set去重后长度为1，会被选中定位
• data-attr="email"的LI对应位置存在不同值，Set去重后长度大于1，不会被处理

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