无法获取上下文元素文本：使用jQuery .each()遍历p元素文本异常

你遇到的问题应该是在遍历<p>元素时，没有正确定位到当前遍历的元素，反而不小心获取了整个文档的文本内容。结合你的HTML结构，我来帮你梳理下问题和解决方法：

先贴出你的HTML结构方便参考：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<main>
<p>Kon</p>
<p>Mule</p>
</main>
<p>Hello ri...</p>
</body>
</html>

为什么会拿到整个文档的文本？ #

大概率是你在.each()的回调函数里，没有正确指向当前遍历的<p>元素，而是调用了全局范围的文本获取方法。比如类似下面的错误写法：

$('p').each(function() {
  // 错误：获取了整个body的文本，不是当前p的
  console.log($('body').text());
  // 或者错误使用了$.text()（这不是正确的jQuery用法）
  console.log($.text());
});

正确的解决写法 #

在.each()的回调里，this关键字指向的就是当前正在遍历的那个<p>元素，你只需要把它包装成jQuery对象，再调用.text()就能拿到单个<p>的文本了：

$('p').each(function() {
  // 正确获取当前p元素的文本内容
  const currentText = $(this).text();
  console.log(currentText);
});

运行这段代码后，控制台会依次输出：

• Kon
• Mule
• Hello ri...

额外优化：只遍历<main>内的<p> #

如果你只想处理<main>标签里的两个<p>，不想包含外面的那个，可以把选择器改成$('main p')：

$('main p').each(function() {
  console.log($(this).text());
});

这样输出就只有：

• Kon
• Mule

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