将列表项 fa fa 图标类名替换为其他类名答案

【问题标题】：Replacing the list item fa fa icon class name with other class name将列表项 fa fa 图标类名替换为其他类名
【发布时间】：2019-10-18 18:42:21
【问题描述】：

我有一个类似下面的代码

<ul> 
<li> <i class="fa fa-map-marker"></i> Name</li>  
<li> <i class="fa fa-envelope-o"></i> Email</li>
<li> <i class="fa fa-mobile"></i> Mobile Number </li> 
</ul>

我尝试使用下面的 jquery 代码将类名 fa-map-marker 替换为 fa-user

$('i').removeClass('fa-map-marker').addClass('fa-user');

但是类名同时应用于姓名和电子邮件会导致姓名和电子邮件的用户图标相同。

请帮我如何排序。

【问题讨论】：

标签： jquery html font-awesome

【解决方案1】：

你可以这样做：$('i.fa-map-marker').removeClass('fa-map-marker').addClass('fa-user');

$('i.fa-map-marker') 将返回所有具有.fa-map-marker 类的<i>

演示

$('i.fa-map-marker').removeClass('fa-map-marker').addClass('fa-user');

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul> 
<li> <i class="fa fa-map-marker"></i> Name</li>  
<li> <i class="fa fa-envelope-o"></i> Email</li>
<li> <i class="fa fa-mobile"></i> Mobile Number </li> 
</ul>

【讨论】：

【解决方案2】：

这是你的解决方案

$('i.fa-map-marker').removeClass('fa-map-marker').addClass('fa-user');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul> 
<li> <i class="fa fa-map-marker"></i> Name</li>  
<li> <i class="fa fa-envelope-o"></i> Email</li>
<li> <i class="fa fa-mobile"></i> Mobile Number </li> 
</ul>

您可以编辑或预览代码Here

【讨论】：