技术问询：从嵌套div中提取并对比自定义列表

刚好处理过类似的需求，我来分享几个实用的实现方案，不管你用原生JavaScript还是jQuery都能搞定，还包含了列表对比的常用逻辑，直接就能复用。

1. 原生JavaScript提取列表内容 #

先看最通用的原生JS方案，不需要依赖任何库，兼容性也拉满：

// 封装提取函数，传入容器的选择器（比如id、class）
function extractListContent(containerSelector) {
  // 先找到目标容器
  const container = document.querySelector(containerSelector);
  if (!container) return []; // 容器不存在就返回空数组，避免报错
  
  // 选中容器下所有带.m_data类的子元素
  const itemElements = container.querySelectorAll('.m_data');
  
  // 把NodeList转成数组，提取每个元素的文本并去除前后空格
  return Array.from(itemElements).map(item => item.textContent.trim());
}

// 用你给的示例HTML来测试
const list1 = extractListContent('#a1');
console.log(list1); // 输出: ["Kowalski", "Melman", "Marty"]

这里要注意：如果你的.m_data元素可能嵌套在更深的层级里，或者想精确只选容器的直接子元素，可以把选择器改成containerSelector + ' > .m_data'，避免误选其他无关元素。

2. jQuery版本提取（更简洁） #

如果你的项目已经引入了jQuery，那代码可以更短：

function extractListContent(containerSelector) {
  // 找到容器下的所有.m_data元素，提取文本后转成数组
  return $(containerSelector).find('.m_data').map(function() {
    return $(this).text().trim();
  }).get();
}

// 同样的测试示例
const list1 = extractListContent('#a1');

jQuery的map()方法会返回一个jQuery对象，最后用.get()转成普通数组，方便后续处理。

3. 列表内容对比的核心逻辑 #

提取完两个列表后，通常需要做这几种对比：判断是否完全相等、找两个列表的差异项、找共同项。我把这些逻辑都封装成函数：

3.1 判断两个列表是否完全一致（顺序+内容都相同） #

function areListsEqual(listA, listB) {
  // 长度不一样直接返回false
  if (listA.length !== listB.length) return false;
  // 逐个对比每个位置的元素
  return listA.every((item, index) => item === listB[index]);
}

3.2 找两个列表的差异项 #

比如想知道List1有但List2没有的内容，或者反过来：

// 计算ListA独有的项
function getUniqueItems(listA, listB) {
  const listBSet = new Set(listB); // 用Set提升查找效率
  return listA.filter(item => !listBSet.has(item));
}

// 示例：假设我们有第二个列表容器#a2
const list2 = extractListContent('#a2');
const onlyInList1 = getUniqueItems(list1, list2);
const onlyInList2 = getUniqueItems(list2, list1);

console.log('List1独有的内容:', onlyInList1);
console.log('List2独有的内容:', onlyInList2);

3.3 找两个列表的共同项 #

function getCommonItems(listA, listB) {
  const listBSet = new Set(listB);
  return listA.filter(item => listBSet.has(item));
}

const commonItems = getCommonItems(list1, list2);
console.log('两个列表都有的内容:', commonItems);

4. 一些避坑提示 #

• 动态内容处理：如果你的列表是通过AJAX或者JS动态渲染的，一定要等元素加载完成再调用提取函数。可以把代码放在DOMContentLoaded事件里，或者用MutationObserver监听容器的变化。
• 去重需求：如果列表里可能有重复的文本，可以在提取的时候加一步去重：return [...new Set(Array.from(itemElements).map(...))]
• 选择器准确性：如果页面上有多个.m_data元素，一定要用容器选择器（比如#a1）限制范围，避免提取到无关内容。

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