如何用变量选取以icon-为前缀的类并克隆到子元素

我明白你遇到的问题了——用属性选择器匹配带icon-前缀的类有时候会因为元素多类名的写法或者需求理解偏差导致失效。咱们一步步来实现你要的功能：

1. 先确认选择元素的正确性 #

你之前写的选择器$("div[class^='icon-'],div[class*=' icon-']")理论上是能选中所有带有icon-前缀类的div元素的，但如果它没生效，可能有这几个原因：

• 目标元素不是div（比如是a、li？），你需要把选择器里的div换成对应的标签，或者直接用*匹配所有元素
• 类名里有特殊字符？不过你的场景里是icon-search-icon，应该没问题

如果要更通用的选择器，可以写成：

const $iconElements = $("[class^='icon-'], [class*=' icon-']");

2. 提取元素上的icon-前缀类并克隆到子元素 #

但我猜你真正的需求不是选元素，而是提取元素上所有以icon-开头的类，然后把这些类添加到它的子元素上？如果是这样，咱们可以这么做：

// 遍历所有带有icon-前缀类的元素
$("[class^='icon-'], [class*=' icon-']").each(function() {
  // 获取当前元素的所有类名
  const classList = $(this).attr("class").split(" ");
  // 过滤出以icon-开头的类
  const iconClasses = classList.filter(className => className.startsWith("icon-"));
  
  // 把这些类添加到当前元素的子元素上（这里假设是直接子元素，可根据需求调整）
  $(this).children().addClass(iconClasses.join(" "));
});

3. 更简洁的写法（针对单个目标元素） #

如果你已经知道目标元素的特定标识（比如menu-item-188这个类），可以直接定位元素后处理：

// 定位目标元素
const $targetItem = $(".menu-item-188");
// 提取所有icon-开头的类名
const iconClasses = $targetItem.attr("class").split(" ")
  .filter(className => className.startsWith("icon-"))
  .join(" ");
// 将类添加到子元素
$targetItem.children().addClass(iconClasses);

为什么之前的选择器可能没生效？ #

如果你的目标是选择元素但选择器失效，不妨检查：

• 代码是否在DOM完全加载后执行？可以把逻辑放在$(document).ready()回调里
• 元素是否嵌套在iframe中？这种情况需要先获取iframe的文档对象再进行选择
• 类名是否有大小写差异？比如实际是Icon-而非icon-，jQuery默认区分大小写，建议统一类名的大小写规范

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