将列表项 fa fa 图标 class 名称替换为其他 class 名称

Question

我有一个类似下面的代码

<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>

我尝试使用 [=28] 将 class 名称 fa-map-marker 替换为 fa-user =] 代码如下

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

但是 class 名称同时应用于名称和电子邮件，导致名称和电子邮件的用户图标相同。

请帮我解决这个问题。

Answer 1

你可以这么简单：$('i.fa-map-marker').removeClass('fa-map-marker').addClass('fa-user');

$('i.fa-map-marker') 将 return 具有 class .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>

Answer 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

将列表项 fa fa 图标 class 名称替换为其他 class 名称

Replacing the list item fa fa icon class name with other class name

html

jquery

font-awesome