如何用jQuery批量修改.gender类元素文本，去除["""]格式字符

嘿，我来帮你搞定这个文本处理的问题！你遇到的核心问题是在遍历元素时没有正确指向当前元素，导致所有元素的文本被错误地统一设置了。下面给你正确的实现方案，再帮你分析错误原因。

正确的实现方案 #

方法1：用.each()正确遍历每个元素 #

这个方法明确遍历每个.gender元素，针对单个元素处理文本：

$('.gender').each(function() {
  // 用$(this)获取当前正在遍历的.gender元素
  const currentElementText = $(this).text();
  // 提取双引号之间的内容
  const cleanedText = currentElementText.substring(
    currentElementText.indexOf('"') + 1,
    currentElementText.lastIndexOf('"')
  );
  // 给当前元素设置处理后的文本
  $(this).text(cleanedText);
});

方法2：更简洁的.text()回调写法 #

jQuery的.text()方法支持传入回调函数，它会自动遍历所有匹配元素，你只需要处理单个元素的原文本并返回新值即可，代码更简洁：

$('.gender').text(function(index, originalText) {
  // 直接从当前元素的原文本中提取引号内的内容并返回
  return originalText.substring(originalText.indexOf('"') + 1, originalText.lastIndexOf('"'));
});

你的错误代码分析 #

你之前的代码有两个致命问题：

• 错误获取文本：每次循环都用$('.gender').text()，这会获取所有.gender元素的文本拼接结果（比如两个元素会得到["PS4"]["XBOX"]），而不是当前单个元素的文本。
• 错误设置文本：最后用$('.gender').text(text2)把所有元素的文本都改成了这个拼接后处理的错误值，导致所有元素内容变成PS4][XBOX且一致。

最终效果 #

执行正确代码后，你的HTML会变成你期望的样子：

<div class="gender">PS4</div>
<div class="gender">XBOX</div>

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