Замена элемента списка fa fa icon имя класса другим именем класса

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>

Я попытался заменить имя класса fa-map-marker на fa-user с помощью jqueryкод как показано ниже

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

, но имя класса применяется как для имени, так и для электронной почты, что приводит к одинаковому значку пользователя для имени и электронной почты.

, пожалуйста, помогите мне, как отсортировать это.

Answer 1

Это ваше решение

$('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>

Вы можете редактировать или просматривать код Здесь

Answer 2

Вы можете сделать это просто так: $('i.fa-map-marker').removeClass('fa-map-marker').addClass('fa-user');

$('i.fa-map-marker') вернет все <i>, которые имеют класс .fa-map-marker

Демо

$('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>