动态结构下使用jQuery获取class为My_data的首个元素的技术咨询

嘿，针对你这个动态数据结构的需求，我给你梳理两种实用的解决方案，既能处理元素已经存在的情况，也能应对DOM动态变化的场景：

1. 基础场景：元素已存在于DOM中 #

如果你的目标元素已经加载完成，直接用document.querySelector()就可以搞定——这个方法本身就会返回匹配选择器的第一个元素，完美契合你的需求。代码示例如下：

// 获取第一个class为My_data的元素
const firstMyDataElement = document.querySelector('.My_data');

// 处理元素存在/不存在的情况
if (firstMyDataElement) {
  const targetContent = firstMyDataElement.textContent.trim();
  console.log('获取到的内容:', targetContent); // 若存在会输出"My data 1"
} else {
  console.log('当前DOM中没有找到class为My_data的元素');
}

2. 动态场景：元素异步加载/随时变化 #

因为你的数据结构是动态的，元素可能后续才会被插入DOM，这时候直接查询可能会找不到。推荐用MutationObserver来监听DOM变化，一旦目标元素出现就立即捕获：

// 创建观察者实例，指定回调函数
const observer = new MutationObserver((mutations) => {
  const firstMyDataElement = document.querySelector('.My_data');
  if (firstMyDataElement) {
    const targetContent = firstMyDataElement.textContent.trim();
    console.log('找到目标元素，内容为:', targetContent);
    observer.disconnect(); // 找到后停止监听，避免不必要的性能消耗
  }
});

// 开始监听DOM变化（这里监听body及其所有子节点，你也可以指定更具体的父容器）
observer.observe(document.body, {
  childList: true, // 监听子节点的添加/移除
  subtree: true   // 监听所有后代节点
});

// 可选：设置超时时间，防止无限监听
setTimeout(() => {
  observer.disconnect();
  console.log('超时未找到class为My_data的元素');
}, 10000); // 10秒超时，可根据实际情况调整时长

关键说明 #

• document.querySelector('.My_data')是核心：它只会返回第一个匹配.My_data选择器的元素，不管前面有没有其他不带这个类的div，完全符合你要取第一个"My_data"元素的需求。
• 一定要做存在性判断：因为有时候可能没有任何元素带有这个类，直接操作firstMyDataElement会报错，所以if (firstMyDataElement)的判断必不可少。

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