jQuery根据特定用户名修改前置图标类失效，求问题排查

我有一段展示在线用户的HTML代码，每个在线用户条目包含<i>图标元素和显示用户名的<span>元素，需要为不同用户名设置对应的专属前置图标。我编写了一段jQuery代码，但执行后没有任何效果，希望找出代码中的问题。

HTML代码 #

<div class="online-users">
online users
    <span class="user-online">
         <i class="fa fa-circle"></i>
         <span class="user-name">Ster</span>
    </span>
    <span class="user-online">
         <i class="fa fa-circle"></i>
         <span class="user-name">dimitris</span>
    </span>
    <!-- ... more users... -->
</div>

尝试的jQuery代码 #

<script>
$(document).ready(function(){
    $('.online-users span.user-name').each(function(){
        $(this:contains('Ster')).siblings('i').toggleClass('fa-solid fa-user-gear');
        $(this:contains('dimitris')).siblings('i').toggleClass('fa-solid fa-user-pen');
    });
});
</script>

你的代码存在两个核心问题：

• 语法错误：$(this:contains('Ster')) 写法不符合jQuery语法规范，:contains选择器不能直接跟在this后面，需要用filter方法筛选当前元素，或者直接判断元素文本内容。
• 逻辑与方法误用：toggleClass会切换类的状态，可能导致图标类重复添加/移除；同时没有清除原有的fa-circle类，新旧图标类冲突会导致图标无法正常显示。

修正后的代码如下：

$(document).ready(function(){
    $('.online-users span.user-name').each(function(){
        const $currentUser = $(this);
        const $userIcon = $currentUser.siblings('i');
        
        // 先移除默认的圆形图标类
        $userIcon.removeClass('fa-circle');
        
        // 根据用户名设置对应图标
        const userName = $currentUser.text().trim();
        if (userName === 'Ster') {
            $userIcon.addClass('fa-solid fa-user-gear');
        } else if (userName === 'dimitris') {
            $userIcon.addClass('fa-solid fa-user-pen');
        }
        // 可在此扩展更多用户名的图标规则
    });
});

额外说明 #

1. 用text().trim()是为了避免用户名文本前后的空格导致判断失效；
2. 若用户名存在大小写差异，可统一转换为小写后判断，比如userName.toLowerCase() === 'ster'；
3. 请确保已正确引入Font Awesome的CSS文件，否则新图标无法正常显示。

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