jQuery如何获取同个父元素下子元素文本并转为父元素的独立类名

问题根因 #

直接调用$(selector).text()获取多个元素文本时，jQuery会自动将所有匹配元素的文本拼接为单个字符串，导致你只能生成一个合并后的类，而不是每个子元素对应一个独立类。

可直接运行的修改后代码 #

$(".parent").each(function(){
  // 缓存当前父元素
  const $parent = $(this)
  // 遍历当前父元素下的每一个子元素
  $parent.find(".child").each(function(){
    // 单独获取当前子元素的文本
    const childText = $(this).text()
    // 按照规则处理类名
    const className = 'new_' + childText
      .replace(/[^a-z0-9\s]/gi, '') // 移除非字母、数字、空格的特殊字符
      .replace(/\s+/g, '_') // 连续空格统一替换为单下划线
      .toLowerCase() // 全部转为小写
    // 给父元素添加处理好的独立类
    $parent.addClass(className)
    // 如需和示例效果对齐，移除子元素的child类，可打开下方注释
    // $(this).removeClass('child')
  })
})

逻辑说明 #

• 嵌套一层子元素遍历逻辑，每个子元素单独处理文本生成类名，保证类名独立
• 优化了空格替换正则，避免多个连续空格生成冗余下划线的问题
• 保留了移除子元素child类的可选逻辑，可按需开启匹配你给出的最终HTML效果

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