如何在jQuery中为多实例.remove-word类元素实现.each()函数，或直接移除元素文本的第一个单词

很高兴能帮你搞定这个问题！我们分两部分来解决你的需求：

一、使用.each()处理多个.remove-word元素 #

你之前的代码在多元素场景下失效，是因为jQuery('.remove-word').text()会把所有匹配元素的文本内容合并在一起处理，导致所有元素最后都变成相同的文本。解决办法就是用.each()遍历每个元素，单独处理每个元素的文本：

jQuery(document).ready(function(){ 
  jQuery('.remove-word').each(function() {
    // 指向当前遍历到的单个元素
    const $element = jQuery(this);
    let text = $element.text();
    
    // 替换指定单词并去除多余空格
    text = text.replace('on', '').replace('at', '').trim();
    
    $element.text(text);
  });
});

这段代码的关键点：

• .each()会逐个处理每个.remove-word元素，this代表当前正在处理的元素
• 用trim()去除替换后可能出现的多余空格（比如"on the beach"替换后变成" the beach"，trim后就是"the beach"）

二、更优方案：直接移除第一个单词（无需指定具体单词） #

如果想要不管第一个单词是什么都移除，不需要硬编码on或at，可以用正则表达式或者字符串分割拼接的方式实现，更通用：

方法1：正则表达式（简洁高效） #

jQuery(document).ready(function(){ 
  jQuery('.remove-word').each(function() {
    const $element = jQuery(this);
    // 匹配开头的第一个单词+后面的空格，替换为空
    const updatedText = $element.text().replace(/^\w+\s+/, '').trim();
    $element.text(updatedText);
  });
});

正则说明：

• ^：匹配字符串开头
• \w+：匹配一个或多个单词字符（字母、数字、下划线）
• \s+：匹配一个或多个空格
• 整体就是移除开头的第一个单词和它后面的空格

方法2：字符串分割拼接（更直观） #

jQuery(document).ready(function(){ 
  jQuery('.remove-word').each(function() {
    const $element = jQuery(this);
    const textParts = $element.text().split(/\s+/); // 用任意数量的空格分割成数组
    
    // 如果有多个单词，移除第一个后重新拼接；如果只有一个单词，清空（可根据需求调整）
    const updatedText = textParts.length > 1 ? textParts.slice(1).join(' ') : '';
    
    $element.text(updatedText);
  });
});

这种方法通过将文本拆分成单词数组，去掉第一个元素后再拼接成字符串，逻辑更直观，也能处理多个空格的情况。

两种方法都能完美实现你的需求，推荐正则方案，代码更简洁~

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